npm - @getflip/swirl-components - Versions diffs - 0.3.1 → 0.4.0 - Mend

@getflip/swirl-components 0.3.1 → 0.4.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.

Files changed (284) hide show

package/dist/components/flip-radio.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { c as classnames } from './index2.js';
 import { d as defineCustomElement$2 } from './flip-visually-hidden2.js';
-const flipRadioCss = ".sc-flip-radio-h{display:inline-flex}.sc-flip-radio-h *.sc-flip-radio{box-sizing:border-box}.radio.sc-flip-radio{display:inline-flex;cursor:pointer;line-height:var(--s-line-height-base)}.radio.sc-flip-radio:focus-within .radio__box.sc-flip-radio{box-shadow:0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default)}.radio--checked.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.radio--checked.sc-flip-radio .radio__box.sc-flip-radio{position:relative;border-color:var(--s-icon-highlight);background-color:var(--s-icon-highlight)}.radio--checked.sc-flip-radio .radio__box.sc-flip-radio:after{position:absolute;top:50%;left:50%;width:0.5rem;height:0.5rem;border-radius:50%;background-color:var(--s-background-default);content:\"\";transform:translate3d(-50%, -50%, 0)}.radio--invalid.radio--checked.sc-flip-radio .radio__box.sc-flip-radio,.radio--invalid.radio--indeterminate.sc-flip-radio .radio__box.sc-flip-radio{background-color:var(--s-icon-critical)}.radio--invalid.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-critical)}.radio--disabled.sc-flip-radio{cursor:default}.radio--disabled.radio--checked.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);background-color:transparent}.radio--disabled.radio--checked.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);background-color:var(--s-background-default)}.radio--disabled.radio--checked.sc-flip-radio .radio__box.sc-flip-radio:after{background-color:var(--s-icon-disabled)}.radio--disabled.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{background-color:transparent}.radio--disabled.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);backround-color:var(--s-icon-disabled)}.radio--disabled.sc-flip-radio .radio__description.sc-flip-radio,.radio--disabled.sc-flip-radio .radio__label.sc-flip-radio{color:var(--s-text-disabled)}.radio__control.sc-flip-radio{position:relative;display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{background-color:var(--s-action-neutral-hovered)}.radio__box.sc-flip-radio{position:relative;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:50%}.radio__label-container.sc-flip-radio{display:inline-flex;margin-left:var(--s-space-12);padding-top:var(--s-space-2);flex-direction:column}.radio__label.sc-flip-radio{font-weight:var(--s-font-weight-medium)}.radio__description.sc-flip-radio{color:var(--s-text-subdued)}";
+const flipRadioCss = ".sc-flip-radio-h{display:inline-flex}.sc-flip-radio-h *.sc-flip-radio{box-sizing:border-box}.radio.sc-flip-radio{display:inline-flex;cursor:pointer;line-height:var(--s-line-height-base)}.radio.sc-flip-radio:focus-within .radio__box.sc-flip-radio{box-shadow:0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default)}.radio--checked.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.radio--checked.sc-flip-radio .radio__box.sc-flip-radio{position:relative;border-color:var(--s-icon-highlight);background-color:var(--s-icon-highlight)}.radio--checked.sc-flip-radio .radio__box.sc-flip-radio:after{position:absolute;top:50%;left:50%;width:0.5rem;height:0.5rem;border-radius:50%;background-color:var(--s-background-default);content:\"\";transform:translate3d(-50%, -50%, 0)}.radio--invalid.radio--checked.sc-flip-radio .radio__box.sc-flip-radio,.radio--invalid.radio--indeterminate.sc-flip-radio .radio__box.sc-flip-radio{background-color:var(--s-icon-critical)}.radio--invalid.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-critical)}.radio--disabled.sc-flip-radio{cursor:default}.radio--disabled.radio--checked.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);background-color:transparent}.radio--disabled.radio--checked.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);background-color:var(--s-background-default)}.radio--disabled.radio--checked.sc-flip-radio .radio__box.sc-flip-radio:after{background-color:var(--s-icon-disabled)}.radio--disabled.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{background-color:transparent}.radio--disabled.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);backround-color:var(--s-icon-disabled)}.radio--disabled.sc-flip-radio .radio__description.sc-flip-radio,.radio--disabled.sc-flip-radio .radio__label.sc-flip-radio{color:var(--s-text-disabled)}.radio__control.sc-flip-radio{position:relative;display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{background-color:var(--s-action-neutral-hovered)}.radio__box.sc-flip-radio{position:relative;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:50%}.radio__label-container.sc-flip-radio{display:inline-flex;margin-left:var(--s-space-8);padding-top:var(--s-space-2);flex-direction:column}.radio__label.sc-flip-radio{font-weight:var(--s-font-weight-medium)}.radio__description.sc-flip-radio{color:var(--s-text-subdued)}";
 const FlipRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/flip-radio.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"flip-radio.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,~~0vFAA0vF~~;;~~MCiBlwFA~~,WAAS;EAZtB;;;;IAa2B,YAAO,GAAoB,KAAK,CAAC;IAElD,aAAQ,GAAa,KAAK,CAAC;IAS3B,aAAQ,GAAG;MACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;MACpB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACnC,CAAC;GA8CH;EA5CC,MAAM;IACJ,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC;IACrE,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,KAAK,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC;IAEjE,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;IAC1E,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;IAEjC,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,EAAE;MACpC,gBAAgB,EAAE,OAAO;MACzB,iBAAiB,EAAE,IAAI,CAAC,QAAQ;MAChC,gBAAgB,EAAE,IAAI,CAAC,OAAO;MAC9B,kBAAkB,EAAE,SAAS;KAC9B,CAAC,CAAC;IAEH,QACE,EAAC,IAAI,QACH,aAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IAC5C,YAAM,KAAK,EAAC,gBAAgB,IAC1B,gCACE,6BACgB,gBAAgB,kBAChB,WAAW,EACzB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,cAAc,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACmB,EACvB,2BAAkB,MAAM,EAAC,KAAK,EAAC,YAAY,GAAQ,CAC9C,EACP,YAAM,KAAK,EAAC,wBAAwB,IACjC,IAAI,CAAC,KAAK,IAAI,YAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC5D,IAAI,CAAC,WAAW,KACf,YAAM,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC3D,CACI,CACD,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["FlipRadio"],"sources":["./src/components/flip-radio/flip-radio.css?tag=flip-radio&encapsulation=scoped","./src/components/flip-radio/flip-radio.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.radio {\n display: inline-flex;\n cursor: pointer;\n line-height: var(--s-line-height-base);\n\n &:focus-within .radio__box {\n box-shadow: 0 0 0 0.0625rem var(--s-background-default),\n 0 0 0 0.1875rem var(--s-focus-default);\n }\n}\n\n.radio--checked {\n & .radio__control {\n &:hover {\n & .radio__box {\n border-color: var(--s-interactive-primary-hovered);\n background-color: var(--s-interactive-primary-hovered);\n }\n }\n }\n\n & .radio__box {\n position: relative;\n border-color: var(--s-icon-highlight);\n background-color: var(--s-icon-highlight);\n\n &:after {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0.5rem;\n height: 0.5rem;\n border-radius: 50%;\n background-color: var(--s-background-default);\n content: \"\";\n transform: translate3d(-50%, -50%, 0);\n }\n }\n}\n\n.radio--invalid {\n &.radio--checked,\n &.radio--indeterminate {\n & .radio__box {\n background-color: var(--s-icon-critical);\n }\n }\n\n & .radio__box {\n border-color: var(--s-icon-critical);\n }\n}\n\n.radio--disabled {\n cursor: default;\n\n &.radio--checked {\n & .radio__control {\n &:hover {\n & .radio__box {\n border-color: var(--s-icon-disabled);\n background-color: transparent;\n }\n }\n }\n\n & .radio__box {\n border-color: var(--s-icon-disabled);\n background-color: var(--s-background-default);\n\n &:after {\n background-color: var(--s-icon-disabled);\n }\n }\n }\n\n & .radio__control {\n &:hover {\n & .radio__box {\n background-color: transparent;\n }\n }\n }\n\n & .radio__box {\n border-color: var(--s-icon-disabled);\n backround-color: var(--s-icon-disabled);\n }\n\n & .radio__description,\n & .radio__label {\n color: var(--s-text-disabled);\n }\n}\n\n.radio__control {\n position: relative;\n display: inline-flex;\n width: 1.5rem;\n height: 1.5rem;\n padding: var(--s-space-2);\n flex-shrink: 0;\n\n &:hover {\n & .radio__box {\n background-color: var(--s-action-neutral-hovered);\n }\n }\n}\n\n.radio__box {\n position: relative;\n display: flex;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n border: 0.125rem solid var(--s-icon-default);\n border-radius: 50%;\n}\n\n.radio__label-container {\n display: inline-flex;\n margin-left: var(--s-space-12);\n padding-top: var(--s-space-2);\n flex-direction: column;\n}\n\n.radio__label {\n font-weight: var(--s-font-weight-medium);\n}\n\n.radio__description {\n color: var(--s-text-subdued);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipRadioState = boolean \| \"true\" \| \"false\";\n\n@Component({\n /*\n Form controls in shadow dom can still not be associated with labels in the\n * light dom, cross browser. So for now we disable shadow dom for form\n * controls (inputs, buttons, selects, etc.). Instead we use Stencil's scoping.\n * https://caniuse.com/?search=attachInternals\n */\n scoped: true,\n shadow: false,\n styleUrl: \"flip-radio.css\",\n tag: \"flip-radio\",\n})\nexport class FlipRadio {\n @Prop({ mutable: true }) checked?: FlipRadioState = false;\n @Prop() description?: string;\n @Prop() disabled?: boolean = false;\n @Prop() inputId!: string;\n @Prop() inputName!: string;\n @Prop() invalid?: boolean;\n @Prop() label?: string;\n @Prop() value!: string;\n\n @Event() valueChange: EventEmitter<string>;\n\n private onChange = () => {\n this.checked = true;\n this.valueChange.emit(this.value);\n };\n\n render() {\n const unchecked = this.checked === false \|\| this.checked === \"false\";\n const checked = this.checked === true \|\| this.checked === \"true\";\n\n const ariaCheckedLabel = checked ? \"true\" : unchecked ? \"false\" : \"mixed\";\n const ariaInvalid = this.invalid;\n\n const className = classnames(\"radio\", {\n \"radio--checked\": checked,\n \"radio--disabled\": this.disabled,\n \"radio--invalid\": this.invalid,\n \"radio--unchecked\": unchecked,\n });\n\n return (\n <Host>\n <label class={className} htmlFor={this.inputId}>\n <span class=\"radio__control\">\n <flip-visually-hidden>\n <input\n aria-checked={ariaCheckedLabel}\n aria-invalid={ariaInvalid}\n checked={checked}\n class=\"radio__input\"\n disabled={this.disabled}\n id={this.inputId}\n name={this.inputName}\n onChange={this.onChange}\n type=\"radio\"\n value={this.value}\n />\n </flip-visually-hidden>\n <span aria-hidden=\"true\" class=\"radio__box\"></span>\n </span>\n <span class=\"radio__label-container\">\n {this.label && <span class=\"radio__label\">{this.label}</span>}\n {this.description && (\n <span class=\"radio__description\">{this.description}</span>\n )}\n </span>\n </label>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"flip-radio.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,yvFAAyvF;;MCiBjwFA,WAAS;EAZtB;;;;IAa2B,YAAO,GAAoB,KAAK,CAAC;IAElD,aAAQ,GAAa,KAAK,CAAC;IAS3B,aAAQ,GAAG;MACjB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;MACpB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACnC,CAAC;GA8CH;EA5CC,MAAM;IACJ,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,KAAK,KAAK,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC;IACrE,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,KAAK,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,MAAM,CAAC;IAEjE,MAAM,gBAAgB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,CAAC;IAC1E,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;IAEjC,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,EAAE;MACpC,gBAAgB,EAAE,OAAO;MACzB,iBAAiB,EAAE,IAAI,CAAC,QAAQ;MAChC,gBAAgB,EAAE,IAAI,CAAC,OAAO;MAC9B,kBAAkB,EAAE,SAAS;KAC9B,CAAC,CAAC;IAEH,QACE,EAAC,IAAI,QACH,aAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IAC5C,YAAM,KAAK,EAAC,gBAAgB,IAC1B,gCACE,6BACgB,gBAAgB,kBAChB,WAAW,EACzB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAC,cAAc,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,CACmB,EACvB,2BAAkB,MAAM,EAAC,KAAK,EAAC,YAAY,GAAQ,CAC9C,EACP,YAAM,KAAK,EAAC,wBAAwB,IACjC,IAAI,CAAC,KAAK,IAAI,YAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC5D,IAAI,CAAC,WAAW,KACf,YAAM,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC3D,CACI,CACD,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["FlipRadio"],"sources":["./src/components/flip-radio/flip-radio.css?tag=flip-radio&encapsulation=scoped","./src/components/flip-radio/flip-radio.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.radio {\n display: inline-flex;\n cursor: pointer;\n line-height: var(--s-line-height-base);\n\n &:focus-within .radio__box {\n box-shadow: 0 0 0 0.0625rem var(--s-background-default),\n 0 0 0 0.1875rem var(--s-focus-default);\n }\n}\n\n.radio--checked {\n & .radio__control {\n &:hover {\n & .radio__box {\n border-color: var(--s-interactive-primary-hovered);\n background-color: var(--s-interactive-primary-hovered);\n }\n }\n }\n\n & .radio__box {\n position: relative;\n border-color: var(--s-icon-highlight);\n background-color: var(--s-icon-highlight);\n\n &:after {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 0.5rem;\n height: 0.5rem;\n border-radius: 50%;\n background-color: var(--s-background-default);\n content: \"\";\n transform: translate3d(-50%, -50%, 0);\n }\n }\n}\n\n.radio--invalid {\n &.radio--checked,\n &.radio--indeterminate {\n & .radio__box {\n background-color: var(--s-icon-critical);\n }\n }\n\n & .radio__box {\n border-color: var(--s-icon-critical);\n }\n}\n\n.radio--disabled {\n cursor: default;\n\n &.radio--checked {\n & .radio__control {\n &:hover {\n & .radio__box {\n border-color: var(--s-icon-disabled);\n background-color: transparent;\n }\n }\n }\n\n & .radio__box {\n border-color: var(--s-icon-disabled);\n background-color: var(--s-background-default);\n\n &:after {\n background-color: var(--s-icon-disabled);\n }\n }\n }\n\n & .radio__control {\n &:hover {\n & .radio__box {\n background-color: transparent;\n }\n }\n }\n\n & .radio__box {\n border-color: var(--s-icon-disabled);\n backround-color: var(--s-icon-disabled);\n }\n\n & .radio__description,\n & .radio__label {\n color: var(--s-text-disabled);\n }\n}\n\n.radio__control {\n position: relative;\n display: inline-flex;\n width: 1.5rem;\n height: 1.5rem;\n padding: var(--s-space-2);\n flex-shrink: 0;\n\n &:hover {\n & .radio__box {\n background-color: var(--s-action-neutral-hovered);\n }\n }\n}\n\n.radio__box {\n position: relative;\n display: flex;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n border: 0.125rem solid var(--s-icon-default);\n border-radius: 50%;\n}\n\n.radio__label-container {\n display: inline-flex;\n margin-left: var(--s-space-8);\n padding-top: var(--s-space-2);\n flex-direction: column;\n}\n\n.radio__label {\n font-weight: var(--s-font-weight-medium);\n}\n\n.radio__description {\n color: var(--s-text-subdued);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipRadioState = boolean \| \"true\" \| \"false\";\n\n@Component({\n /*\n Form controls in shadow dom can still not be associated with labels in the\n * light dom, cross browser. So for now we disable shadow dom for form\n * controls (inputs, buttons, selects, etc.). Instead we use Stencil's scoping.\n * https://caniuse.com/?search=attachInternals\n */\n scoped: true,\n shadow: false,\n styleUrl: \"flip-radio.css\",\n tag: \"flip-radio\",\n})\nexport class FlipRadio {\n @Prop({ mutable: true }) checked?: FlipRadioState = false;\n @Prop() description?: string;\n @Prop() disabled?: boolean = false;\n @Prop() inputId!: string;\n @Prop() inputName!: string;\n @Prop() invalid?: boolean;\n @Prop() label?: string;\n @Prop() value!: string;\n\n @Event() valueChange: EventEmitter<string>;\n\n private onChange = () => {\n this.checked = true;\n this.valueChange.emit(this.value);\n };\n\n render() {\n const unchecked = this.checked === false \|\| this.checked === \"false\";\n const checked = this.checked === true \|\| this.checked === \"true\";\n\n const ariaCheckedLabel = checked ? \"true\" : unchecked ? \"false\" : \"mixed\";\n const ariaInvalid = this.invalid;\n\n const className = classnames(\"radio\", {\n \"radio--checked\": checked,\n \"radio--disabled\": this.disabled,\n \"radio--invalid\": this.invalid,\n \"radio--unchecked\": unchecked,\n });\n\n return (\n <Host>\n <label class={className} htmlFor={this.inputId}>\n <span class=\"radio__control\">\n <flip-visually-hidden>\n <input\n aria-checked={ariaCheckedLabel}\n aria-invalid={ariaInvalid}\n checked={checked}\n class=\"radio__input\"\n disabled={this.disabled}\n id={this.inputId}\n name={this.inputName}\n onChange={this.onChange}\n type=\"radio\"\n value={this.value}\n />\n </flip-visually-hidden>\n <span aria-hidden=\"true\" class=\"radio__box\"></span>\n </span>\n <span class=\"radio__label-container\">\n {this.label && <span class=\"radio__label\">{this.label}</span>}\n {this.description && (\n <span class=\"radio__description\">{this.description}</span>\n )}\n </span>\n </label>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/flip-tabs.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
-const flipTabsCss = ".sc-flip-tabs-h{display:block;width:100%}.sc-flip-tabs-h *.sc-flip-tabs{box-sizing:border-box}.tabs.sc-flip-tabs{width:100%}.tabs__tab-bar.sc-flip-tabs{position:relative;display:flex;width:100%;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:flex-start;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (--from-tablet){.tabs__tab-bar.sc-flip-tabs{padding-right:0;padding-left:0}}.tabs__tab.sc-flip-tabs{display:block;min-width:0;margin:0;padding:var(--s-space-4) 0;border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer}.tabs__tab.sc-flip-tabs:focus-visible{outline:none}.tabs__tab.sc-flip-tabs:focus-visible .tabs__tab-label.sc-flip-tabs{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tabs__tab.sc-flip-tabs:not(:first-of-type){padding-left:var(--s-space-8)}.tabs__tab.sc-flip-tabs:not(:last-of-type){padding-right:var(--s-space-8)}.tabs__tab-label.sc-flip-tabs{display:block;overflow:hidden;width:100%;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;text-overflow:ellipsis}.tabs__tab--active.sc-flip-tabs{color:var(--s-text-highlight)}.tabs__indicator.sc-flip-tabs{position:absolute;bottom:0;left:0;width:0;height:0.125rem;border-radius:0.0625rem;background-color:var(--s-border-highlight);transition:background-color 0.15s, transform 0.15s, width 0.15s;transform:translate3d(0, 0, 0);pointer-events:none}@media (prefers-reduced-motion){.tabs__indicator.sc-flip-tabs{transition:none}}";
+const flipTabsCss = ".sc-flip-tabs-h{display:block;width:100%}.sc-flip-tabs-h *.sc-flip-tabs{box-sizing:border-box}.tabs.sc-flip-tabs{width:100%}.tabs__tab-bar.sc-flip-tabs{position:relative;display:flex;width:100%;justify-content:flex-start;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.tabs__tab.sc-flip-tabs{position:relative;display:block;min-width:0;margin:0;padding:var(--s-space-4) var(--s-space-8);border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer}.tabs__tab.sc-flip-tabs:focus-visible{outline:none}.tabs__tab.sc-flip-tabs:focus-visible .tabs__tab-label.sc-flip-tabs{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tabs__tab.sc-flip-tabs:not(.tabs__tab--active):hover:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-default);content:\"\";transform:translateX(-50%);pointer-events:none}.tabs__tab-label.sc-flip-tabs{display:block;overflow:hidden;width:100%;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;text-overflow:ellipsis}.tabs__tab--active.sc-flip-tabs{color:var(--s-text-highlight)}.tabs__tab--active.sc-flip-tabs:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-highlight);content:\"\";transform:translateX(-50%);pointer-events:none}";
 const FlipTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -19,27 +19,10 @@ const FlipTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         this.activateNextTab();
       }
     };
-    this.onMouseEnter = (event, tab) => {
-      if (tab.tabId === this.activeTab) {
-        this.highlightedTab = undefined;
-        return;
-      }
-      this.highlightedTab =
-        event.target.closest(".tabs__tab") || undefined;
-    };
-    this.onMouseLeave = () => {
-      this.highlightedTab = undefined;
-    };
   }
   componentWillLoad() {
     this.collectTabs();
   }
-  componentDidRender() {
-    this.updateIndicatorPosition();
-  }
-  onWindowResize() {
-    this.updateIndicatorPosition();
-  }
   /**
    * Activate a tab.
    * @param tabId
@@ -54,7 +37,6 @@ const FlipTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     if (!Boolean(tab)) {
       return;
     }
-    this.highlightedTab = undefined;
     tab.active = true;
     this.tabActivated.emit(tab);
   }
@@ -84,23 +66,6 @@ const FlipTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const initialTab = this.tabs.find((tab) => tab.tabId === this.initialTab);
     this.activateTab(Boolean(initialTab) ? initialTab.tabId : this.tabs[0].tabId);
   }
-  updateIndicatorPosition() {
-    const activeTab = this.tabs.find((tab) => tab.tabId === this.activeTab);
-    if (!Boolean(activeTab) && !Boolean(this.highlightedTab)) {
-      this.indicatorEl.style.width = "";
-      this.indicatorEl.style.transform = "";
-      this.indicatorEl.style.backgroundColor = "";
-      return;
-    }
-    const activeTabEl = this.highlightedTab ||
-      this.el.querySelector(`#tab-${activeTab.tabId}`);
-    const activeTabLabelEl = activeTabEl.querySelector(".tabs__tab-label");
-    this.indicatorEl.style.width = `${activeTabLabelEl.getBoundingClientRect().width / 16}rem`;
-    this.indicatorEl.style.transform = `translate3d(${activeTabLabelEl.offsetLeft / 16}rem, 0, 0)`;
-    this.indicatorEl.style.backgroundColor = Boolean(this.highlightedTab)
-      ? "var(--s-border-default)"
-      : "";
-  }
   render() {
     return (h(Host, null, h("div", { class: "tabs" }, h("div", { "aria-label": this.label, class: "tabs__tab-bar", onKeyDown: this.onKeyDown, role: "tablist" }, this.tabs.map((tab) => {
       const isActive = tab.tabId === this.activeTab;
@@ -109,10 +74,8 @@ const FlipTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       });
       return (h("button", { "aria-controls": tab.tabId, "aria-selected": isActive ? "true" : "false", class: className, id: `tab-${tab.tabId}`, key: tab.tabId,
         // eslint-disable-next-line react/jsx-no-bind
-        onClick: () => this.activateTab(tab.tabId),
-        // eslint-disable-next-line react/jsx-no-bind
-        onMouseEnter: (event) => this.onMouseEnter(event, tab), onMouseLeave: this.onMouseLeave, role: "tab", tabIndex: isActive ? 0 : -1, type: "button" }, h("span", { class: "tabs__tab-label" }, tab.label)));
-    }), h("span", { class: "tabs__indicator", ref: (el) => (this.indicatorEl = el) })), h("slot", null))));
+        onClick: () => this.activateTab(tab.tabId), role: "tab", tabIndex: isActive ? 0 : -1, type: "button" }, h("span", { class: "tabs__tab-label" }, tab.label)));
+    })), h("slot", null))));
   }
   get el() { return this; }
   static get style() { return flipTabsCss; }
@@ -120,9 +83,8 @@ const FlipTabs$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "initialTab": [1, "initial-tab"],
     "label": [1],
     "activeTab": [32],
-    "highlightedTab": [32],
     "activateTab": [64]
-  }, [[9, "resize", "onWindowResize"]]]);
+  }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/flip-tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"flip-tabs.js","mappings":"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","names":["FlipTabs"],"sources":["./src/components/flip-tabs/flip-tabs.css?tag=flip-tabs&encapsulation=scoped","./src/components/flip-tabs/flip-tabs.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.tabs {\n width: 100%;\n}\n\n.tabs__tab-bar {\n position: relative;\n display: flex;\n width: 100%;\n padding-right: var(--s-space-16);\n padding-left: var(--s-space-16);\n justify-content: flex-start;\n border-bottom: var(--s-border-width-default) solid var(--s-border-default);\n\n @media (--from-tablet) {\n padding-right: 0;\n padding-left: 0;\n }\n}\n\n.tabs__tab {\n display: block;\n min-width: 0;\n margin: 0;\n padding: var(--s-space-4) 0;\n border: none;\n background-color: transparent;\n font: inherit;\n font-weight: var(--s-font-weight-medium);\n line-height: var(--s-line-height-base);\n cursor: pointer;\n\n &:focus-visible {\n outline: none;\n\n & .tabs__tab-label {\n border-radius: var(--s-border-radius-s);\n box-shadow: inset 0 0 0 0.125rem var(--s-focus-default);\n }\n }\n\n &:not(:first-of-type) {\n padding-left: var(--s-space-8);\n }\n\n &:not(:last-of-type) {\n padding-right: var(--s-space-8);\n }\n}\n\n.tabs__tab-label {\n display: block;\n overflow: hidden;\n width: 100%;\n padding: var(--s-space-8) var(--s-space-8);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.tabs__tab--active {\n color: var(--s-text-highlight);\n}\n\n.tabs__indicator {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 0;\n height: 0.125rem;\n border-radius: 0.0625rem;\n background-color: var(--s-border-highlight);\n transition: background-color 0.15s, transform 0.15s, width 0.15s;\n transform: translate3d(0, 0, 0);\n pointer-events: none;\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n@Component({\n scoped: true,\n shadow: false,\n styleUrl: \"flip-tabs.css\",\n tag: \"flip-tabs\",\n})\nexport class FlipTabs {\n @Element() el: HTMLElement;\n\n @Prop() initialTab?: string;\n @Prop() label!: string;\n\n @State() activeTab?: string;\n @State() highlightedTab: HTMLElement \| undefined;\n\n @Event() tabActivated: EventEmitter<HTMLFlipTabElement>;\n\n private indicatorEl: HTMLElement;\n private tabs: HTMLFlipTabElement[] = [];\n\n componentWillLoad() {\n this.collectTabs();\n }\n\n componentDidRender() {\n this.updateIndicatorPosition();\n }\n\n @Listen(\"resize\", { target: \"window\" })\n onWindowResize() {\n this.updateIndicatorPosition();\n }\n\n /*\n Activate a tab.\n * @param tabId\n */\n @Method()\n public async activateTab(tabId: string) {\n if (this.activeTab === tabId) {\n return;\n }\n\n this.activeTab = tabId;\n this.tabs.forEach((tab) => (tab.active = false));\n\n const tab = this.tabs.find((tab) => tab.tabId === tabId);\n\n if (!Boolean(tab)) {\n return;\n }\n\n this.highlightedTab = undefined;\n\n tab.active = true;\n this.tabActivated.emit(tab);\n }\n\n private activateNextTab() {\n const currentIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.activeTab\n );\n\n const nextIndex = Math.min(this.tabs.length - 1, currentIndex + 1);\n\n this.activateTab(this.tabs[nextIndex].tabId);\n\n requestAnimationFrame(() => {\n this.el.querySelector<HTMLButtonElement>(\".tabs__tab--active\")?.focus();\n });\n }\n\n private activatePreviousTab() {\n const currentIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.activeTab\n );\n\n const previousIndex = Math.max(0, currentIndex - 1);\n\n this.activateTab(this.tabs[previousIndex].tabId);\n\n requestAnimationFrame(() => {\n this.el.querySelector<HTMLButtonElement>(\".tabs__tab--active\")?.focus();\n });\n }\n\n private collectTabs() {\n this.tabs = Array.from(this.el.querySelectorAll(\"flip-tab\"));\n\n if (this.tabs.length === 0) {\n return;\n }\n\n const initialTab = this.tabs.find((tab) => tab.tabId === this.initialTab);\n\n this.activateTab(\n Boolean(initialTab) ? initialTab.tabId : this.tabs[0].tabId\n );\n }\n\n private updateIndicatorPosition() {\n const activeTab = this.tabs.find((tab) => tab.tabId === this.activeTab);\n\n if (!Boolean(activeTab) && !Boolean(this.highlightedTab)) {\n this.indicatorEl.style.width = \"\";\n this.indicatorEl.style.transform = \"\";\n this.indicatorEl.style.backgroundColor = \"\";\n return;\n }\n\n const activeTabEl =\n this.highlightedTab \|\|\n this.el.querySelector<HTMLButtonElement>(`#tab-${activeTab.tabId}`);\n\n const activeTabLabelEl =\n activeTabEl.querySelector<HTMLSpanElement>(\".tabs__tab-label\");\n\n this.indicatorEl.style.width = `${\n activeTabLabelEl.getBoundingClientRect().width / 16\n }rem`;\n\n this.indicatorEl.style.transform = `translate3d(${\n activeTabLabelEl.offsetLeft / 16\n }rem, 0, 0)`;\n\n this.indicatorEl.style.backgroundColor = Boolean(this.highlightedTab)\n ? \"var(--s-border-default)\"\n : \"\";\n }\n\n private onKeyDown = (event: KeyboardEvent) => {\n if (event.code === \"ArrowLeft\") {\n event.preventDefault();\n this.activatePreviousTab();\n } else if (event.code === \"ArrowRight\") {\n event.preventDefault();\n this.activateNextTab();\n }\n };\n\n private onMouseEnter = (event: MouseEvent, tab: HTMLFlipTabElement) => {\n if (tab.tabId === this.activeTab) {\n this.highlightedTab = undefined;\n return;\n }\n\n this.highlightedTab =\n (event.target as HTMLElement).closest(\".tabs__tab\") \|\| undefined;\n };\n\n private onMouseLeave = () => {\n this.highlightedTab = undefined;\n };\n\n render() {\n return (\n <Host>\n <div class=\"tabs\">\n <div\n aria-label={this.label}\n class=\"tabs__tab-bar\"\n onKeyDown={this.onKeyDown}\n role=\"tablist\"\n >\n {this.tabs.map((tab) => {\n const isActive = tab.tabId === this.activeTab;\n const className = classnames(\"tabs__tab\", {\n \"tabs__tab--active\": isActive,\n });\n\n return (\n <button\n aria-controls={tab.tabId}\n aria-selected={isActive ? \"true\" : \"false\"}\n class={className}\n id={`tab-${tab.tabId}`}\n key={tab.tabId}\n // eslint-disable-next-line react/jsx-no-bind\n onClick={() => this.activateTab(tab.tabId)}\n // eslint-disable-next-line react/jsx-no-bind\n onMouseEnter={(event) => this.onMouseEnter(event, tab)}\n onMouseLeave={this.onMouseLeave}\n role=\"tab\"\n tabIndex={isActive ? 0 : -1}\n type=\"button\"\n >\n <span class=\"tabs__tab-label\">{tab.label}</span>\n </button>\n );\n })}\n\n <span\n class=\"tabs__indicator\"\n ref={(el) => (this.indicatorEl = el)}\n ></span>\n </div>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"flip-tabs.js","mappings":"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","names":["FlipTabs"],"sources":["./src/components/flip-tabs/flip-tabs.css?tag=flip-tabs&encapsulation=scoped","./src/components/flip-tabs/flip-tabs.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.tabs {\n width: 100%;\n}\n\n.tabs__tab-bar {\n position: relative;\n display: flex;\n width: 100%;\n justify-content: flex-start;\n border-bottom: var(--s-border-width-default) solid var(--s-border-default);\n}\n\n.tabs__tab {\n position: relative;\n display: block;\n min-width: 0;\n margin: 0;\n padding: var(--s-space-4) var(--s-space-8);\n border: none;\n background-color: transparent;\n font: inherit;\n font-weight: var(--s-font-weight-medium);\n line-height: var(--s-line-height-base);\n cursor: pointer;\n\n &:focus-visible {\n outline: none;\n\n & .tabs__tab-label {\n border-radius: var(--s-border-radius-s);\n box-shadow: inset 0 0 0 0.125rem var(--s-focus-default);\n }\n }\n\n &:not(.tabs__tab--active) {\n &:hover {\n &:after {\n position: absolute;\n bottom: 0;\n left: 50%;\n width: calc(100% - var(--s-space-8));\n height: 0.1875rem;\n border-radius: 0.125rem;\n background-color: var(--s-border-default);\n content: \"\";\n transform: translateX(-50%);\n pointer-events: none;\n }\n }\n }\n}\n\n.tabs__tab-label {\n display: block;\n overflow: hidden;\n width: 100%;\n padding: var(--s-space-8) var(--s-space-8);\n text-align: center;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.tabs__tab--active {\n color: var(--s-text-highlight);\n\n &:after {\n position: absolute;\n bottom: 0;\n left: 50%;\n width: calc(100% - var(--s-space-8));\n height: 0.1875rem;\n border-radius: 0.125rem;\n background-color: var(--s-border-highlight);\n content: \"\";\n transform: translateX(-50%);\n pointer-events: none;\n }\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Method,\n Prop,\n State,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n@Component({\n scoped: true,\n shadow: false,\n styleUrl: \"flip-tabs.css\",\n tag: \"flip-tabs\",\n})\nexport class FlipTabs {\n @Element() el: HTMLElement;\n\n @Prop() initialTab?: string;\n @Prop() label!: string;\n\n @State() activeTab?: string;\n\n @Event() tabActivated: EventEmitter<HTMLFlipTabElement>;\n\n private tabs: HTMLFlipTabElement[] = [];\n\n componentWillLoad() {\n this.collectTabs();\n }\n\n /*\n Activate a tab.\n * @param tabId\n */\n @Method()\n public async activateTab(tabId: string) {\n if (this.activeTab === tabId) {\n return;\n }\n\n this.activeTab = tabId;\n this.tabs.forEach((tab) => (tab.active = false));\n\n const tab = this.tabs.find((tab) => tab.tabId === tabId);\n\n if (!Boolean(tab)) {\n return;\n }\n\n tab.active = true;\n this.tabActivated.emit(tab);\n }\n\n private activateNextTab() {\n const currentIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.activeTab\n );\n\n const nextIndex = Math.min(this.tabs.length - 1, currentIndex + 1);\n\n this.activateTab(this.tabs[nextIndex].tabId);\n\n requestAnimationFrame(() => {\n this.el.querySelector<HTMLButtonElement>(\".tabs__tab--active\")?.focus();\n });\n }\n\n private activatePreviousTab() {\n const currentIndex = this.tabs.findIndex(\n (tab) => tab.tabId === this.activeTab\n );\n\n const previousIndex = Math.max(0, currentIndex - 1);\n\n this.activateTab(this.tabs[previousIndex].tabId);\n\n requestAnimationFrame(() => {\n this.el.querySelector<HTMLButtonElement>(\".tabs__tab--active\")?.focus();\n });\n }\n\n private collectTabs() {\n this.tabs = Array.from(this.el.querySelectorAll(\"flip-tab\"));\n\n if (this.tabs.length === 0) {\n return;\n }\n\n const initialTab = this.tabs.find((tab) => tab.tabId === this.initialTab);\n\n this.activateTab(\n Boolean(initialTab) ? initialTab.tabId : this.tabs[0].tabId\n );\n }\n\n private onKeyDown = (event: KeyboardEvent) => {\n if (event.code === \"ArrowLeft\") {\n event.preventDefault();\n this.activatePreviousTab();\n } else if (event.code === \"ArrowRight\") {\n event.preventDefault();\n this.activateNextTab();\n }\n };\n\n render() {\n return (\n <Host>\n <div class=\"tabs\">\n <div\n aria-label={this.label}\n class=\"tabs__tab-bar\"\n onKeyDown={this.onKeyDown}\n role=\"tablist\"\n >\n {this.tabs.map((tab) => {\n const isActive = tab.tabId === this.activeTab;\n const className = classnames(\"tabs__tab\", {\n \"tabs__tab--active\": isActive,\n });\n\n return (\n <button\n aria-controls={tab.tabId}\n aria-selected={isActive ? \"true\" : \"false\"}\n class={className}\n id={`tab-${tab.tabId}`}\n key={tab.tabId}\n // eslint-disable-next-line react/jsx-no-bind\n onClick={() => this.activateTab(tab.tabId)}\n role=\"tab\"\n tabIndex={isActive ? 0 : -1}\n type=\"button\"\n >\n <span class=\"tabs__tab-label\">{tab.label}</span>\n </button>\n );\n })}\n </div>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/flip-text-input.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { d as defineCustomElement$4 } from './flip-icon-expand-more2.js';
 import { d as defineCustomElement$3 } from './flip-icon-visibility2.js';
 import { d as defineCustomElement$2 } from './flip-icon-visibility-off2.js';
-const flipTextInputCss = ".sc-flip-text-input-h{display:block;width:100%}.sc-flip-text-input-h *.sc-flip-text-input{box-sizing:border-box}.text-input.sc-flip-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm)}.text-input--clearable.sc-flip-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--type-number.sc-flip-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-flip-text-input .text-input__input.sc-flip-text-input{width:100%}.text-input--disabled.sc-flip-text-input .text-input__character-counter.sc-flip-text-input{color:var(--s-text-disabled)}.text-input__input.sc-flip-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-flip-text-input:focus{outline:none}.text-input__input.sc-flip-text-input:disabled{color:var(--s-text-disabled);background-color:transparent}.text-input__input.sc-flip-text-input::-webkit-outer-spin-button,.text-input__input.sc-flip-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type=\"number\"].sc-flip-text-input{-moz-appearance:textfield}input.text-input__input.sc-flip-text-input:not([type=\"password\"]){width:0.25rem;min-width:0.25rem}.text-input__clear-button.sc-flip-text-input,.text-input__password-toggle.sc-flip-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-flip-text-input:focus,.text-input__password-toggle.sc-flip-text-input:focus{outline-color:var(--s-focus-default)}.text-input__stepper.sc-flip-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}.text-input__step-button.sc-flip-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-flip-text-input:focus{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-flip-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}.text-input__prefix.sc-flip-text-input{padding-right:var(--s-space-4);font-size:var(--s-font-size-base)}.text-input__suffix.sc-flip-text-input{padding-left:var(--s-space-4);font-size:var(--s-font-size-base)}";
+const flipTextInputCss = ".sc-flip-text-input-h{display:block;width:100%}.sc-flip-text-input-h *.sc-flip-text-input{box-sizing:border-box}.text-input.sc-flip-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm)}.text-input--clearable.sc-flip-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--type-number.sc-flip-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-flip-text-input .text-input__input.sc-flip-text-input{width:100%}.text-input--disabled.sc-flip-text-input .text-input__character-counter.sc-flip-text-input{color:var(--s-text-disabled)}.text-input__input.sc-flip-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-flip-text-input:focus{outline:none}.text-input__input.sc-flip-text-input:disabled{color:var(--s-text-disabled);background-color:transparent}.text-input__input.sc-flip-text-input::-webkit-outer-spin-button,.text-input__input.sc-flip-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type=\"number\"].sc-flip-text-input{-moz-appearance:textfield}input.text-input__input.sc-flip-text-input:not([type=\"password\"]){width:0.25rem;min-width:0.25rem}.text-input__clear-button.sc-flip-text-input,.text-input__password-toggle.sc-flip-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-flip-text-input:focus,.text-input__password-toggle.sc-flip-text-input:focus{outline-color:var(--s-focus-default)}.text-input__stepper.sc-flip-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}.text-input__step-button.sc-flip-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-flip-text-input:focus{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-flip-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}.text-input__prefix.sc-flip-text-input{padding-right:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}.text-input__suffix.sc-flip-text-input{padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-base)}";
 const FlipTextInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/flip-text-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"flip-text-input.js","mappings":"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","names":["FlipTextInput"],"sources":["./src/components/flip-text-input/flip-text-input.css?tag=flip-text-input&encapsulation=scoped","./src/components/flip-text-input/flip-text-input.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.text-input {\n position: relative;\n display: flex;\n width: 100%;\n align-items: center;\n color: var(--s-text-default);\n font: inherit;\n line-height: var(--s-line-height-sm);\n}\n\n.text-input--clearable {\n padding-right: calc(1.5rem + var(--s-space-8));\n}\n\n.text-input--type-number {\n padding-right: calc(1.5rem + var(--s-space-8));\n}\n\n.text-input--show-password {\n & .text-input__input {\n width: 100%;\n }\n}\n\n.text-input--disabled {\n & .text-input__character-counter {\n color: var(--s-text-disabled);\n }\n}\n\n.text-input__input {\n display: inline-flex;\n width: 100%;\n max-height: 13.75rem;\n margin: 0;\n padding: 0;\n border: none;\n color: var(--s-text-default);\n background-color: transparent;\n font: inherit;\n font-size: var(--s-font-size-base);\n line-height: var(--s-line-height-base);\n resize: none;\n caret-color: var(--s-border-highlight);\n\n &:focus {\n outline: none;\n }\n\n &:disabled {\n color: var(--s-text-disabled);\n background-color: transparent;\n }\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n margin: 0;\n -webkit-appearance: none;\n }\n\n &[type=\"number\"] {\n -moz-appearance: textfield;\n }\n}\n\ninput.text-input__input:not([type=\"password\"]) {\n width: 0.25rem;\n min-width: 0.25rem;\n}\n\n.text-input__clear-button,\n.text-input__password-toggle {\n position: absolute;\n top: calc(-1 * var(--s-space-12));\n right: 0;\n display: inline-flex;\n margin: 0;\n padding: 0;\n border: none;\n color: var(--s-icon-default);\n background-color: transparent;\n cursor: pointer;\n\n &:focus {\n outline-color: var(--s-focus-default);\n }\n}\n\n.text-input__stepper {\n position: absolute;\n top: -1.4375rem;\n right: 0;\n display: flex;\n flex-direction: column;\n}\n\n.text-input__step-button {\n display: inline-flex;\n margin: 0;\n padding: 0;\n border: none;\n color: var(--s-icon-default);\n background-color: transparent;\n cursor: pointer;\n\n &:focus {\n outline-color: var(--s-focus-default);\n }\n}\n\n.text-input__character-counter {\n position: absolute;\n top: -1.375rem;\n right: 0;\n display: flex;\n color: var(--s-text-subdued);\n line-height: var(--s-line-height-sm);\n flex-direction: column;\n}\n\n.text-input__prefix {\n padding-right: var(--s-space-4);\n font-size: var(--s-font-size-base);\n}\n\n.text-input__suffix {\n padding-left: var(--s-space-4);\n font-size: var(--s-font-size-base);\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\nimport { FlipFormInput } from \"../../utils\";\n\nexport type FlipTextInputType =\n \| \"date\"\n \| \"datetime-local\"\n \| \"email\"\n \| \"number\"\n \| \"password\"\n \| \"reset\"\n \| \"tel\"\n \| \"text\"\n \| \"url\";\n\nexport type FlipTextInputMode =\n \| \"decimal\"\n \| \"email\"\n \| \"numeric\"\n \| \"search\"\n \| \"tel\"\n \| \"text\"\n \| \"url\";\n\n@Component({\n /*\n Form controls in shadow dom can still not be associated with labels in the\n * light dom, cross browser. So for now we disable shadow dom for form\n * controls (inputs, buttons, selects, etc.). Instead we use Stencil's scoping.\n * https://caniuse.com/?search=attachInternals\n */\n scoped: true,\n shadow: false,\n styleUrl: \"flip-text-input.css\",\n tag: \"flip-text-input\",\n})\nexport class FlipTextInput implements FlipFormInput {\n @Prop() autoComplete?: string = \"on\";\n @Prop() autoFocus?: boolean;\n @Prop() autoSelect?: boolean;\n @Prop() clearable?: boolean;\n @Prop() clearButtonLabel?: string = \"Clear input\";\n @Prop() disabled?: boolean;\n @Prop() flipAriaDescribedby?: string;\n @Prop() invalid?: boolean;\n @Prop() maxLength?: number;\n @Prop() max?: number;\n @Prop() min?: number;\n @Prop() mode?: FlipTextInputMode;\n @Prop() prefixLabel?: string;\n @Prop() required?: boolean;\n @Prop() rows?: number = 1;\n @Prop() showCharacterCounter?: boolean;\n @Prop() spellCheck?: boolean;\n @Prop() suffixLabel?: string;\n @Prop() step?: number;\n @Prop() passwordToggleLabel?: string = \"Toggle password display\";\n @Prop() type?: FlipTextInputType = \"text\";\n @Prop({ mutable: true, reflect: true }) value?: string;\n\n @State() showPassword = false;\n\n @Event() valueChange: EventEmitter<string>;\n\n private inputEl: HTMLInputElement;\n\n componentDidRender() {\n this.adjustInputSize();\n }\n\n private adjustInputSize() {\n if (this.rows > 1) {\n this.inputEl.style.width = \"\";\n this.inputEl.style.height = \"\";\n this.inputEl.style.height = this.inputEl.scrollHeight / 16 + \"rem\";\n }\n\n if (this.rows === 1) {\n this.inputEl.style.height = \"\";\n this.inputEl.style.width = \"\";\n\n if (this.type !== \"password\") {\n this.inputEl.style.width = this.inputEl.scrollWidth / 16 + \"rem\";\n }\n }\n }\n\n private clear = () => {\n this.inputEl.value = \"\";\n this.value = \"\";\n this.valueChange.emit(\"\");\n this.inputEl.focus();\n };\n\n private onChange = (event: Event) => {\n const el = event.target as HTMLInputElement;\n\n this.value = el.value;\n this.valueChange.emit(el.value);\n };\n\n private onFocus = (event: FocusEvent) => {\n this.handleAutoSelect(event);\n };\n\n private onInput = (event: InputEvent) => {\n this.onChange(event);\n };\n\n private onKeyPress = (event: KeyboardEvent) => {\n if (this.type !== \"number\") {\n return;\n }\n\n if ([\"+\", \"-\", \"e\"].includes(event.key)) {\n event.preventDefault();\n }\n };\n\n private decreaseValue = () => {\n if (this.type !== \"number\") {\n return;\n }\n const step = this.step \|\| 1;\n const currentValue = isNaN(this.inputEl.valueAsNumber)\n ? this.min !== undefined\n ? this.min + 1\n : 1\n : this.inputEl.valueAsNumber;\n\n this.value = String(Math.max(this.min \|\| -Infinity, currentValue - step));\n this.valueChange.emit(this.value);\n };\n\n private increaseValue = () => {\n if (this.type !== \"number\") {\n return;\n }\n\n const step = this.step \|\| 1;\n const currentValue = isNaN(this.inputEl.valueAsNumber)\n ? this.min !== undefined\n ? this.min - 1\n : -1\n : this.inputEl.valueAsNumber;\n\n this.value = String(Math.min(this.max \|\| Infinity, currentValue + step));\n this.valueChange.emit(this.value);\n };\n\n private handleAutoSelect(event: FocusEvent) {\n if (!this.autoSelect) {\n return;\n }\n\n (event.target as HTMLInputElement).select();\n }\n\n private togglePassword = () => {\n if (this.type !== \"password\") {\n return;\n }\n\n this.showPassword = !this.showPassword;\n };\n\n render() {\n const Tag = this.rows === 1 ? \"input\" : \"textarea\";\n\n const ariaInvalid =\n this.invalid === true\n ? \"true\"\n : this.invalid === false\n ? \"false\"\n : undefined;\n\n const showStepper = this.type === \"number\" && !this.disabled;\n const showPasswordToggle = this.type === \"password\" && !this.disabled;\n\n const showClearButton =\n this.clearable &&\n !this.disabled &&\n Boolean(this.value) &&\n !showPasswordToggle &&\n !showStepper &&\n !this.showCharacterCounter;\n\n const type =\n this.type === \"password\" && this.showPassword ? \"text\" : this.type;\n\n const className = classnames(\n \"text-input\",\n `text-input--type-${this.type}`,\n {\n \"text-input--clearable\": this.clearable,\n \"text-input--disabled\": this.disabled,\n \"text-input--show-password\":\n this.type === \"password\" && this.showPassword,\n }\n );\n\n return (\n <Host>\n <div class={className}>\n {this.prefixLabel && (\n <span class=\"text-input__prefix\">{this.prefixLabel}</span>\n )}\n <Tag\n aria-describedby={this.flipAriaDescribedby}\n aria-disabled={this.disabled ? \"true\" : undefined}\n aria-invalid={ariaInvalid}\n autoComplete={this.autoComplete}\n autoFocus={this.autoFocus}\n class=\"text-input__input\"\n disabled={this.disabled}\n inputMode={this.mode}\n maxLength={this.maxLength}\n max={this.type === \"number\" ? this.max : undefined}\n min={this.type === \"number\" ? this.min : undefined}\n onFocus={this.onFocus}\n onInput={this.onInput}\n onKeyPress={this.onKeyPress}\n ref={(el) => (this.inputEl = el)}\n required={this.required}\n rows={this.rows > 1 ? this.rows : undefined}\n spellcheck={this.spellCheck}\n step={this.type === \"number\" ? this.step : undefined}\n type={type}\n value={this.rows === 1 ? this.value : undefined}\n >\n {this.rows > 1 && this.value}\n </Tag>\n {this.suffixLabel && (\n <span class=\"text-input__suffix\">{this.suffixLabel}</span>\n )}\n {showClearButton && (\n <button\n aria-label={this.clearButtonLabel}\n class=\"text-input__clear-button\"\n onClick={this.clear}\n type=\"button\"\n >\n <flip-icon-cancel></flip-icon-cancel>\n </button>\n )}\n {showPasswordToggle && (\n <button\n aria-label={this.passwordToggleLabel}\n class=\"text-input__password-toggle\"\n onClick={this.togglePassword}\n type=\"button\"\n >\n {this.showPassword ? (\n <flip-icon-visibility-off></flip-icon-visibility-off>\n ) : (\n <flip-icon-visibility></flip-icon-visibility>\n )}\n </button>\n )}\n {showStepper && (\n <span class=\"text-input__stepper\">\n <button\n aria-hidden=\"true\"\n class=\"text-input__step-button\"\n onClick={this.increaseValue}\n tabIndex={-1}\n type=\"button\"\n >\n <flip-icon-expand-less></flip-icon-expand-less>\n </button>\n <button\n aria-hidden=\"true\"\n class=\"text-input__step-button\"\n onClick={this.decreaseValue}\n tabIndex={-1}\n type=\"button\"\n >\n <flip-icon-expand-more></flip-icon-expand-more>\n </button>\n </span>\n )}\n {this.showCharacterCounter && (\n <span class=\"text-input__character-counter\">\n {this.value?.length \|\| 0}{\" \"}\n {Boolean(this.maxLength) ? `/ ${this.maxLength}` : \"\"}\n </span>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"flip-text-input.js","mappings":";;;;;;;;AAAA,MAAM,gBAAgB,GAAG,6qFAA6qF;;MC4CzrFA,eAAa;EAZ1B;;;;IAaU,iBAAY,GAAY,IAAI,CAAC;IAI7B,qBAAgB,GAAY,aAAa,CAAC;IAU1C,SAAI,GAAY,CAAC,CAAC;IAKlB,wBAAmB,GAAY,yBAAyB,CAAC;IACzD,SAAI,GAAuB,MAAM,CAAC;IAGjC,iBAAY,GAAG,KAAK,CAAC;IA2BtB,UAAK,GAAG;MACd,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;MACxB,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;MAChB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;MAC1B,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;KACtB,CAAC;IAEM,aAAQ,GAAG,CAAC,KAAY;MAC9B,MAAM,EAAE,GAAG,KAAK,CAAC,MAA0B,CAAC;MAE5C,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,KAAK,CAAC;MACtB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;KACjC,CAAC;IAEM,YAAO,GAAG,CAAC,KAAiB;MAClC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;KAC9B,CAAC;IAEM,YAAO,GAAG,CAAC,KAAiB;MAClC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;KACtB,CAAC;IAEM,eAAU,GAAG,CAAC,KAAoB;MACxC,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;QAC1B,OAAO;OACR;MAED,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;QACvC,KAAK,CAAC,cAAc,EAAE,CAAC;OACxB;KACF,CAAC;IAEM,kBAAa,GAAG;MACtB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;QAC1B,OAAO;OACR;MACD,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC;MAC5B,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;UAClD,IAAI,CAAC,GAAG,KAAK,SAAS;YACpB,IAAI,CAAC,GAAG,GAAG,CAAC;YACZ,CAAC;UACH,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;MAE/B,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,YAAY,GAAG,IAAI,CAAC,CAAC,CAAC;MAC1E,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACnC,CAAC;IAEM,kBAAa,GAAG;MACtB,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;QAC1B,OAAO;OACR;MAED,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC;MAC5B,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;UAClD,IAAI,CAAC,GAAG,KAAK,SAAS;YACpB,IAAI,CAAC,GAAG,GAAG,CAAC;YACZ,CAAC,CAAC;UACJ,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;MAE/B,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,IAAI,QAAQ,EAAE,YAAY,GAAG,IAAI,CAAC,CAAC,CAAC;MACzE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACnC,CAAC;IAUM,mBAAc,GAAG;MACvB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;QAC5B,OAAO;OACR;MAED,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;KACxC,CAAC;GA+HH;EAjOC,kBAAkB;IAChB,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAEO,eAAe;IACrB,IAAI,IAAI,CAAC,IAAI,GAAG,CAAC,EAAE;MACjB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;MAC9B,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAC;MAC/B,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,GAAG,EAAE,GAAG,KAAK,CAAC;KACpE;IAED,IAAI,IAAI,CAAC,IAAI,KAAK,CAAC,EAAE;MACnB,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAC;MAC/B,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;MAE9B,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;QAC5B,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,EAAE,GAAG,KAAK,CAAC;OAClE;KACF;GACF;EAiEO,gBAAgB,CAAC,KAAiB;IACxC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;MACpB,OAAO;KACR;IAEA,KAAK,CAAC,MAA2B,CAAC,MAAM,EAAE,CAAC;GAC7C;EAUD,MAAM;;IACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,KAAK,CAAC,GAAG,OAAO,GAAG,UAAU,CAAC;IAEnD,MAAM,WAAW,GACf,IAAI,CAAC,OAAO,KAAK,IAAI;QACjB,MAAM;QACN,IAAI,CAAC,OAAO,KAAK,KAAK;UACtB,OAAO;UACP,SAAS,CAAC;IAEhB,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC7D,MAAM,kBAAkB,GAAG,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IAEtE,MAAM,eAAe,GACnB,IAAI,CAAC,SAAS;MACd,CAAC,IAAI,CAAC,QAAQ;MACd,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;MACnB,CAAC,kBAAkB;MACnB,CAAC,WAAW;MACZ,CAAC,IAAI,CAAC,oBAAoB,CAAC;IAE7B,MAAM,IAAI,GACR,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,YAAY,GAAG,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC;IAErE,MAAM,SAAS,GAAG,UAAU,CAC1B,YAAY,EACZ,oBAAoB,IAAI,CAAC,IAAI,EAAE,EAC/B;MACE,uBAAuB,EAAE,IAAI,CAAC,SAAS;MACvC,sBAAsB,EAAE,IAAI,CAAC,QAAQ;MACrC,2BAA2B,EACzB,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,YAAY;KAChD,CACF,CAAC;IAEF,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,SAAS,IAClB,IAAI,CAAC,WAAW,KACf,YAAM,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC3D,EACD,EAAC,GAAG,wBACgB,IAAI,CAAC,mBAAmB,mBAC3B,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,kBACnC,WAAW,EACzB,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAC,mBAAmB,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,IAAI,EACpB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,IAAI,CAAC,GAAG,GAAG,SAAS,EAClD,GAAG,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,IAAI,CAAC,GAAG,GAAG,SAAS,EAClD,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,EAChC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,EAC3C,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,EACpD,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,IAAI,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,GAAG,SAAS,IAE9C,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CACxB,EACL,IAAI,CAAC,WAAW,KACf,YAAM,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC3D,EACA,eAAe,KACd,4BACc,IAAI,CAAC,gBAAgB,EACjC,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,IAAI,EAAC,QAAQ,IAEb,2BAAqC,CAC9B,CACV,EACA,kBAAkB,KACjB,4BACc,IAAI,CAAC,mBAAmB,EACpC,KAAK,EAAC,6BAA6B,EACnC,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,IAChB,mCAAqD,KAErD,+BAA6C,CAC9C,CACM,CACV,EACA,WAAW,KACV,YAAM,KAAK,EAAC,qBAAqB,IAC/B,6BACc,MAAM,EAClB,KAAK,EAAC,yBAAyB,EAC/B,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,QAAQ,IAEb,gCAA+C,CACxC,EACT,6BACc,MAAM,EAClB,KAAK,EAAC,yBAAyB,EAC/B,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,QAAQ,IAEb,gCAA+C,CACxC,CACJ,CACR,EACA,IAAI,CAAC,oBAAoB,KACxB,YAAM,KAAK,EAAC,+BAA+B,IACxC,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,KAAI,CAAC,EAAE,GAAG,EAC5B,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,KAAK,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,CAChD,CACR,CACG,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["FlipTextInput"],"sources":["./src/components/flip-text-input/flip-text-input.css?tag=flip-text-input&encapsulation=scoped","./src/components/flip-text-input/flip-text-input.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.text-input {\n position: relative;\n display: flex;\n width: 100%;\n align-items: center;\n color: var(--s-text-default);\n font: inherit;\n line-height: var(--s-line-height-sm);\n}\n\n.text-input--clearable {\n padding-right: calc(1.5rem + var(--s-space-8));\n}\n\n.text-input--type-number {\n padding-right: calc(1.5rem + var(--s-space-8));\n}\n\n.text-input--show-password {\n & .text-input__input {\n width: 100%;\n }\n}\n\n.text-input--disabled {\n & .text-input__character-counter {\n color: var(--s-text-disabled);\n }\n}\n\n.text-input__input {\n display: inline-flex;\n width: 100%;\n max-height: 13.75rem;\n margin: 0;\n padding: 0;\n border: none;\n color: var(--s-text-default);\n background-color: transparent;\n font: inherit;\n font-size: var(--s-font-size-base);\n line-height: var(--s-line-height-base);\n resize: none;\n caret-color: var(--s-border-highlight);\n\n &:focus {\n outline: none;\n }\n\n &:disabled {\n color: var(--s-text-disabled);\n background-color: transparent;\n }\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n margin: 0;\n -webkit-appearance: none;\n }\n\n &[type=\"number\"] {\n -moz-appearance: textfield;\n }\n}\n\ninput.text-input__input:not([type=\"password\"]) {\n width: 0.25rem;\n min-width: 0.25rem;\n}\n\n.text-input__clear-button,\n.text-input__password-toggle {\n position: absolute;\n top: calc(-1 * var(--s-space-12));\n right: 0;\n display: inline-flex;\n margin: 0;\n padding: 0;\n border: none;\n color: var(--s-icon-default);\n background-color: transparent;\n cursor: pointer;\n\n &:focus {\n outline-color: var(--s-focus-default);\n }\n}\n\n.text-input__stepper {\n position: absolute;\n top: -1.4375rem;\n right: 0;\n display: flex;\n flex-direction: column;\n}\n\n.text-input__step-button {\n display: inline-flex;\n margin: 0;\n padding: 0;\n border: none;\n color: var(--s-icon-default);\n background-color: transparent;\n cursor: pointer;\n\n &:focus {\n outline-color: var(--s-focus-default);\n }\n}\n\n.text-input__character-counter {\n position: absolute;\n top: -1.375rem;\n right: 0;\n display: flex;\n color: var(--s-text-subdued);\n line-height: var(--s-line-height-sm);\n flex-direction: column;\n}\n\n.text-input__prefix {\n padding-right: var(--s-space-4);\n color: var(--s-text-subdued);\n font-size: var(--s-font-size-base);\n}\n\n.text-input__suffix {\n padding-left: var(--s-space-4);\n color: var(--s-text-subdued);\n font-size: var(--s-font-size-base);\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\nimport { FlipFormInput } from \"../../utils\";\n\nexport type FlipTextInputType =\n \| \"date\"\n \| \"datetime-local\"\n \| \"email\"\n \| \"number\"\n \| \"password\"\n \| \"reset\"\n \| \"tel\"\n \| \"text\"\n \| \"url\";\n\nexport type FlipTextInputMode =\n \| \"decimal\"\n \| \"email\"\n \| \"numeric\"\n \| \"search\"\n \| \"tel\"\n \| \"text\"\n \| \"url\";\n\n@Component({\n /*\n Form controls in shadow dom can still not be associated with labels in the\n * light dom, cross browser. So for now we disable shadow dom for form\n * controls (inputs, buttons, selects, etc.). Instead we use Stencil's scoping.\n * https://caniuse.com/?search=attachInternals\n */\n scoped: true,\n shadow: false,\n styleUrl: \"flip-text-input.css\",\n tag: \"flip-text-input\",\n})\nexport class FlipTextInput implements FlipFormInput {\n @Prop() autoComplete?: string = \"on\";\n @Prop() autoFocus?: boolean;\n @Prop() autoSelect?: boolean;\n @Prop() clearable?: boolean;\n @Prop() clearButtonLabel?: string = \"Clear input\";\n @Prop() disabled?: boolean;\n @Prop() flipAriaDescribedby?: string;\n @Prop() invalid?: boolean;\n @Prop() maxLength?: number;\n @Prop() max?: number;\n @Prop() min?: number;\n @Prop() mode?: FlipTextInputMode;\n @Prop() prefixLabel?: string;\n @Prop() required?: boolean;\n @Prop() rows?: number = 1;\n @Prop() showCharacterCounter?: boolean;\n @Prop() spellCheck?: boolean;\n @Prop() suffixLabel?: string;\n @Prop() step?: number;\n @Prop() passwordToggleLabel?: string = \"Toggle password display\";\n @Prop() type?: FlipTextInputType = \"text\";\n @Prop({ mutable: true, reflect: true }) value?: string;\n\n @State() showPassword = false;\n\n @Event() valueChange: EventEmitter<string>;\n\n private inputEl: HTMLInputElement;\n\n componentDidRender() {\n this.adjustInputSize();\n }\n\n private adjustInputSize() {\n if (this.rows > 1) {\n this.inputEl.style.width = \"\";\n this.inputEl.style.height = \"\";\n this.inputEl.style.height = this.inputEl.scrollHeight / 16 + \"rem\";\n }\n\n if (this.rows === 1) {\n this.inputEl.style.height = \"\";\n this.inputEl.style.width = \"\";\n\n if (this.type !== \"password\") {\n this.inputEl.style.width = this.inputEl.scrollWidth / 16 + \"rem\";\n }\n }\n }\n\n private clear = () => {\n this.inputEl.value = \"\";\n this.value = \"\";\n this.valueChange.emit(\"\");\n this.inputEl.focus();\n };\n\n private onChange = (event: Event) => {\n const el = event.target as HTMLInputElement;\n\n this.value = el.value;\n this.valueChange.emit(el.value);\n };\n\n private onFocus = (event: FocusEvent) => {\n this.handleAutoSelect(event);\n };\n\n private onInput = (event: InputEvent) => {\n this.onChange(event);\n };\n\n private onKeyPress = (event: KeyboardEvent) => {\n if (this.type !== \"number\") {\n return;\n }\n\n if ([\"+\", \"-\", \"e\"].includes(event.key)) {\n event.preventDefault();\n }\n };\n\n private decreaseValue = () => {\n if (this.type !== \"number\") {\n return;\n }\n const step = this.step \|\| 1;\n const currentValue = isNaN(this.inputEl.valueAsNumber)\n ? this.min !== undefined\n ? this.min + 1\n : 1\n : this.inputEl.valueAsNumber;\n\n this.value = String(Math.max(this.min \|\| -Infinity, currentValue - step));\n this.valueChange.emit(this.value);\n };\n\n private increaseValue = () => {\n if (this.type !== \"number\") {\n return;\n }\n\n const step = this.step \|\| 1;\n const currentValue = isNaN(this.inputEl.valueAsNumber)\n ? this.min !== undefined\n ? this.min - 1\n : -1\n : this.inputEl.valueAsNumber;\n\n this.value = String(Math.min(this.max \|\| Infinity, currentValue + step));\n this.valueChange.emit(this.value);\n };\n\n private handleAutoSelect(event: FocusEvent) {\n if (!this.autoSelect) {\n return;\n }\n\n (event.target as HTMLInputElement).select();\n }\n\n private togglePassword = () => {\n if (this.type !== \"password\") {\n return;\n }\n\n this.showPassword = !this.showPassword;\n };\n\n render() {\n const Tag = this.rows === 1 ? \"input\" : \"textarea\";\n\n const ariaInvalid =\n this.invalid === true\n ? \"true\"\n : this.invalid === false\n ? \"false\"\n : undefined;\n\n const showStepper = this.type === \"number\" && !this.disabled;\n const showPasswordToggle = this.type === \"password\" && !this.disabled;\n\n const showClearButton =\n this.clearable &&\n !this.disabled &&\n Boolean(this.value) &&\n !showPasswordToggle &&\n !showStepper &&\n !this.showCharacterCounter;\n\n const type =\n this.type === \"password\" && this.showPassword ? \"text\" : this.type;\n\n const className = classnames(\n \"text-input\",\n `text-input--type-${this.type}`,\n {\n \"text-input--clearable\": this.clearable,\n \"text-input--disabled\": this.disabled,\n \"text-input--show-password\":\n this.type === \"password\" && this.showPassword,\n }\n );\n\n return (\n <Host>\n <div class={className}>\n {this.prefixLabel && (\n <span class=\"text-input__prefix\">{this.prefixLabel}</span>\n )}\n <Tag\n aria-describedby={this.flipAriaDescribedby}\n aria-disabled={this.disabled ? \"true\" : undefined}\n aria-invalid={ariaInvalid}\n autoComplete={this.autoComplete}\n autoFocus={this.autoFocus}\n class=\"text-input__input\"\n disabled={this.disabled}\n inputMode={this.mode}\n maxLength={this.maxLength}\n max={this.type === \"number\" ? this.max : undefined}\n min={this.type === \"number\" ? this.min : undefined}\n onFocus={this.onFocus}\n onInput={this.onInput}\n onKeyPress={this.onKeyPress}\n ref={(el) => (this.inputEl = el)}\n required={this.required}\n rows={this.rows > 1 ? this.rows : undefined}\n spellcheck={this.spellCheck}\n step={this.type === \"number\" ? this.step : undefined}\n type={type}\n value={this.rows === 1 ? this.value : undefined}\n >\n {this.rows > 1 && this.value}\n </Tag>\n {this.suffixLabel && (\n <span class=\"text-input__suffix\">{this.suffixLabel}</span>\n )}\n {showClearButton && (\n <button\n aria-label={this.clearButtonLabel}\n class=\"text-input__clear-button\"\n onClick={this.clear}\n type=\"button\"\n >\n <flip-icon-cancel></flip-icon-cancel>\n </button>\n )}\n {showPasswordToggle && (\n <button\n aria-label={this.passwordToggleLabel}\n class=\"text-input__password-toggle\"\n onClick={this.togglePassword}\n type=\"button\"\n >\n {this.showPassword ? (\n <flip-icon-visibility-off></flip-icon-visibility-off>\n ) : (\n <flip-icon-visibility></flip-icon-visibility>\n )}\n </button>\n )}\n {showStepper && (\n <span class=\"text-input__stepper\">\n <button\n aria-hidden=\"true\"\n class=\"text-input__step-button\"\n onClick={this.increaseValue}\n tabIndex={-1}\n type=\"button\"\n >\n <flip-icon-expand-less></flip-icon-expand-less>\n </button>\n <button\n aria-hidden=\"true\"\n class=\"text-input__step-button\"\n onClick={this.decreaseValue}\n tabIndex={-1}\n type=\"button\"\n >\n <flip-icon-expand-more></flip-icon-expand-more>\n </button>\n </span>\n )}\n {this.showCharacterCounter && (\n <span class=\"text-input__character-counter\">\n {this.value?.length \|\| 0}{\" \"}\n {Boolean(this.maxLength) ? `/ ${this.maxLength}` : \"\"}\n </span>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/flip-toast2.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { c as classnames } from './index2.js';
 import { d as defineCustomElement$1 } from './flip-icon-close2.js';
-const flipToastCss = ":host{display:flex}:host *{box-sizing:border-box}.toast{display:flex;width:100%;max-width:28rem;padding:var(--s-space-16);border-radius:0.75rem;color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default)}.toast--intent-critical{background-color:var(--s-surface-critical-default)}.toast--intent-success{background-color:var(--s-surface-success-default)}.toast__icon{display:inline-flex;margin-top:calc(-1 * var(--s-space-2));margin-right:0.625rem;flex-shrink:0}.toast__icon ::part(icon){color:var(--s-icon-on-status)}.toast__content{flex-grow:1;line-height:var(--s-line-height-base);text-align:left}.toast__dismiss-button{display:inline-flex;min-width:1.5rem;height:1.5rem;margin-top:calc(-1 * var(--s-space-2));margin-left:var(--s-space-16);padding:0;flex-shrink:0;justify-content:center;align-items:center;border:none;color:var(--s-text-on-status);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);cursor:pointer}.toast__dismiss-button ::part(icon){color:var(--s-icon-on-status)}";
+const flipToastCss = ":host{display:flex}:host *{box-sizing:border-box}.toast{display:flex;width:100%;max-width:28rem;padding:var(--s-space-16);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default)}.toast--intent-critical{background-color:var(--s-surface-critical-default)}.toast--intent-success{background-color:var(--s-surface-success-default)}.toast__icon{display:inline-flex;margin-top:calc(-1 * var(--s-space-2));margin-right:0.625rem;flex-shrink:0}.toast__icon ::part(icon){color:var(--s-icon-on-status)}.toast__content{flex-grow:1;line-height:var(--s-line-height-base);text-align:left}.toast__dismiss-button{display:inline-flex;min-width:1.5rem;height:1.5rem;margin-top:calc(-1 * var(--s-space-2));margin-left:var(--s-space-16);padding:0;flex-shrink:0;justify-content:center;align-items:center;border:none;color:var(--s-text-on-status);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);cursor:pointer}.toast__dismiss-button ::part(icon){color:var(--s-icon-on-status)}";
 const FlipToast = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/flip-toast2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"flip-toast2.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,~~4gCAA4gC~~;;~~MCkBphC~~,SAAS;EALtB;;;;;IAMU,2BAAsB,GAAY,SAAS,CAAC;IAK5C,WAAM,GAAqB,SAAS,CAAC;IAqCrC,cAAS,GAAG;MAClB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACjC,CAAC;GAuBH;EAtDC,aAAa;IACX,IAAI,CAAC,UAAU,EAAE,CAAC;GACnB;EAED,gBAAgB;IACd,IAAI,CAAC,UAAU,EAAE,CAAC;GACnB;EAEO,UAAU;IAChB,IAAI,CAAC,UAAU,EAAE,CAAC;IAElB,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE;MAC/B,OAAO;KACR;IAED,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;MACxB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACjC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;GACnB;EAEO,UAAU;IAChB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;MAC1B,OAAO;KACR;IAED,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC3B,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;GAC1B;EAMD,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,EAAE,iBAAiB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAEtE,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,SAAS,IAClB,IAAI,CAAC,IAAI,IAAI,YAAM,KAAK,EAAC,aAAa,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAS,EACrE,YAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,OAAO,CAAQ,EAClD,4BACc,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,sBAAsB,EAC5D,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,EACjB,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,0BAAmC,CAC5D,CACL,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/flip-toast/flip-toast.css?tag=flip-toast&encapsulation=shadow","./src/components/flip-toast/flip-toast.tsx"],"sourcesContent":[":host {\n display: flex;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.toast {\n display: flex;\n width: 100%;\n max-width: 28rem;\n padding: var(--s-space-16);\n border-radius: ~~0.75rem~~;\n color: var(--s-text-on-status);\n background-color: var(--s-surface-neutral-default);\n}\n\n.toast--intent-critical {\n background-color: var(--s-surface-critical-default);\n}\n\n.toast--intent-success {\n background-color: var(--s-surface-success-default);\n}\n\n.toast__icon {\n display: inline-flex;\n margin-top: calc(-1 * var(--s-space-2));\n margin-right: 0.625rem;\n flex-shrink: 0;\n\n & ::part(icon) {\n color: var(--s-icon-on-status);\n }\n}\n\n.toast__content {\n flex-grow: 1;\n line-height: var(--s-line-height-base);\n text-align: left;\n}\n\n.toast__dismiss-button {\n display: inline-flex;\n min-width: 1.5rem;\n height: 1.5rem;\n margin-top: calc(-1 * var(--s-space-2));\n margin-left: var(--s-space-16);\n padding: 0;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n border: none;\n color: var(--s-text-on-status);\n background-color: transparent;\n font: inherit;\n font-weight: var(--s-font-weight-semibold);\n cursor: pointer;\n\n & ::part(icon) {\n color: var(--s-icon-on-status);\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Watch,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipToastIntent = \"default\" \| \"critical\" \| \"success\";\n\n@Component({\n shadow: true,\n styleUrl: \"flip-toast.css\",\n tag: \"flip-toast\",\n})\nexport class FlipToast {\n @Prop() accessibleDismissLabel?: string = \"Dismiss\";\n @Prop() content!: string;\n @Prop() dismissLabel?: string;\n @Prop() duration?: number;\n @Prop() icon?: string;\n @Prop() intent?: FlipToastIntent = \"default\";\n @Prop() toastId!: string;\n\n @Event() dismiss: EventEmitter<string>;\n\n private timeout: NodeJS.Timeout;\n\n @Watch(\"duration\")\n watchDuration() {\n this.startTimer();\n }\n\n componentDidLoad() {\n this.startTimer();\n }\n\n private startTimer() {\n this.clearTimer();\n\n if (this.duration === undefined) {\n return;\n }\n\n this.timeout = setTimeout(() => {\n this.dismiss.emit(this.toastId);\n }, this.duration);\n }\n\n private clearTimer() {\n if (!Boolean(this.timeout)) {\n return;\n }\n\n clearTimeout(this.timeout);\n this.timeout = undefined;\n }\n\n private onDismiss = () => {\n this.dismiss.emit(this.toastId);\n };\n\n render() {\n const className = classnames(\"toast\", `toast--intent-${this.intent}`);\n\n return (\n <Host>\n <div class={className}>\n {this.icon && <span class=\"toast__icon\" innerHTML={this.icon}></span>}\n <span class=\"toast__content\">{this.content}</span>\n <button\n aria-label={this.dismissLabel \|\| this.accessibleDismissLabel}\n class=\"toast__dismiss-button\"\n onClick={this.onDismiss}\n type=\"button\"\n >\n {this.dismissLabel}\n {!Boolean(this.dismissLabel) && <flip-icon-close></flip-icon-close>}\n </button>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"flip-toast2.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,8hCAA8hC;;MCkBtiC,SAAS;EALtB;;;;;IAMU,2BAAsB,GAAY,SAAS,CAAC;IAK5C,WAAM,GAAqB,SAAS,CAAC;IAqCrC,cAAS,GAAG;MAClB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACjC,CAAC;GAuBH;EAtDC,aAAa;IACX,IAAI,CAAC,UAAU,EAAE,CAAC;GACnB;EAED,gBAAgB;IACd,IAAI,CAAC,UAAU,EAAE,CAAC;GACnB;EAEO,UAAU;IAChB,IAAI,CAAC,UAAU,EAAE,CAAC;IAElB,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE;MAC/B,OAAO;KACR;IAED,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;MACxB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACjC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;GACnB;EAEO,UAAU;IAChB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;MAC1B,OAAO;KACR;IAED,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC3B,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;GAC1B;EAMD,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,EAAE,iBAAiB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAEtE,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,SAAS,IAClB,IAAI,CAAC,IAAI,IAAI,YAAM,KAAK,EAAC,aAAa,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAS,EACrE,YAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,OAAO,CAAQ,EAClD,4BACc,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,sBAAsB,EAC5D,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,EACjB,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,0BAAmC,CAC5D,CACL,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/flip-toast/flip-toast.css?tag=flip-toast&encapsulation=shadow","./src/components/flip-toast/flip-toast.tsx"],"sourcesContent":[":host {\n display: flex;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.toast {\n display: flex;\n width: 100%;\n max-width: 28rem;\n padding: var(--s-space-16);\n border-radius: var(--s-border-radius-sm);\n color: var(--s-text-on-status);\n background-color: var(--s-surface-neutral-default);\n}\n\n.toast--intent-critical {\n background-color: var(--s-surface-critical-default);\n}\n\n.toast--intent-success {\n background-color: var(--s-surface-success-default);\n}\n\n.toast__icon {\n display: inline-flex;\n margin-top: calc(-1 * var(--s-space-2));\n margin-right: 0.625rem;\n flex-shrink: 0;\n\n & ::part(icon) {\n color: var(--s-icon-on-status);\n }\n}\n\n.toast__content {\n flex-grow: 1;\n line-height: var(--s-line-height-base);\n text-align: left;\n}\n\n.toast__dismiss-button {\n display: inline-flex;\n min-width: 1.5rem;\n height: 1.5rem;\n margin-top: calc(-1 * var(--s-space-2));\n margin-left: var(--s-space-16);\n padding: 0;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n border: none;\n color: var(--s-text-on-status);\n background-color: transparent;\n font: inherit;\n font-weight: var(--s-font-weight-semibold);\n cursor: pointer;\n\n & ::part(icon) {\n color: var(--s-icon-on-status);\n }\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n Watch,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipToastIntent = \"default\" \| \"critical\" \| \"success\";\n\n@Component({\n shadow: true,\n styleUrl: \"flip-toast.css\",\n tag: \"flip-toast\",\n})\nexport class FlipToast {\n @Prop() accessibleDismissLabel?: string = \"Dismiss\";\n @Prop() content!: string;\n @Prop() dismissLabel?: string;\n @Prop() duration?: number;\n @Prop() icon?: string;\n @Prop() intent?: FlipToastIntent = \"default\";\n @Prop() toastId!: string;\n\n @Event() dismiss: EventEmitter<string>;\n\n private timeout: NodeJS.Timeout;\n\n @Watch(\"duration\")\n watchDuration() {\n this.startTimer();\n }\n\n componentDidLoad() {\n this.startTimer();\n }\n\n private startTimer() {\n this.clearTimer();\n\n if (this.duration === undefined) {\n return;\n }\n\n this.timeout = setTimeout(() => {\n this.dismiss.emit(this.toastId);\n }, this.duration);\n }\n\n private clearTimer() {\n if (!Boolean(this.timeout)) {\n return;\n }\n\n clearTimeout(this.timeout);\n this.timeout = undefined;\n }\n\n private onDismiss = () => {\n this.dismiss.emit(this.toastId);\n };\n\n render() {\n const className = classnames(\"toast\", `toast--intent-${this.intent}`);\n\n return (\n <Host>\n <div class={className}>\n {this.icon && <span class=\"toast__icon\" innerHTML={this.icon}></span>}\n <span class=\"toast__content\">{this.content}</span>\n <button\n aria-label={this.dismissLabel \|\| this.accessibleDismissLabel}\n class=\"toast__dismiss-button\"\n onClick={this.onDismiss}\n type=\"button\"\n >\n {this.dismissLabel}\n {!Boolean(this.dismissLabel) && <flip-icon-close></flip-icon-close>}\n </button>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/index.d.ts CHANGED Viewed

@@ -104,6 +104,7 @@ export { FlipIconVisibility as FlipIconVisibility } from '../types/components/fl
 export { FlipIconVisibilityOff as FlipIconVisibilityOff } from '../types/components/flip-icon/icons/flip-icon-visibility-off';
 export { FlipIconWarning as FlipIconWarning } from '../types/components/flip-icon/icons/flip-icon-warning';
 export { FlipInlineError as FlipInlineError } from '../types/components/flip-inline-error/flip-inline-error';
+export { FlipLightbox as FlipLightbox } from '../types/components/flip-lightbox/flip-lightbox';
 export { FlipLink as FlipLink } from '../types/components/flip-link/flip-link';
 export { FlipList as FlipList } from '../types/components/flip-list/flip-list';
 export { FlipModal as FlipModal } from '../types/components/flip-modal/flip-modal';

package/dist/components/index.js CHANGED Viewed

@@ -104,6 +104,7 @@ export { FlipIconVisibility, defineCustomElement as defineCustomElementFlipIconV
 export { FlipIconVisibilityOff, defineCustomElement as defineCustomElementFlipIconVisibilityOff } from './flip-icon-visibility-off.js';
 export { FlipIconWarning, defineCustomElement as defineCustomElementFlipIconWarning } from './flip-icon-warning.js';
 export { FlipInlineError, defineCustomElement as defineCustomElementFlipInlineError } from './flip-inline-error.js';
+export { FlipLightbox, defineCustomElement as defineCustomElementFlipLightbox } from './flip-lightbox.js';
 export { FlipLink, defineCustomElement as defineCustomElementFlipLink } from './flip-link.js';
 export { FlipList, defineCustomElement as defineCustomElementFlipList } from './flip-list.js';
 export { FlipModal, defineCustomElement as defineCustomElementFlipModal } from './flip-modal.js';

package/dist/components/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"index.js","mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":[],"sourcesContent":[],"version":3}
1	+ {"file":"index.js","mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/esm/flip-action-list-item.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { r as registerInstance, h, H as Host } from './index-5a3b2828.js';
 import { c as classnames } from './index-6d2e18c6.js';
 import './_commonjsHelpers-44457d8d.js';
-const flipActionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered)}.action-list-item:focus{background-color:var(--s-surface-overlay-hovered);outline:none}.action-list-item:active{background-color:var(--s-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;padding-top:0.0625rem;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}";
+const flipActionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered)}.action-list-item:focus{background-color:var(--s-surface-overlay-hovered);outline:none}.action-list-item:active{background-color:var(--s-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical ::part(icon){color:var(--s-icon-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;padding-top:0.0625rem;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}";
 const FlipActionListItem = class {
   constructor(hostRef) {

package/dist/esm/flip-action-list-item.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"flip-action-list-item.entry.js","mappings":";;;;AAAA,MAAM,qBAAqB,GAAG,~~usDAAusD~~;;~~MCYxtD~~,kBAAkB;EAL/B;;IASU,WAAM,GAA8B,SAAS,CAAC;IAE9C,SAAI,GAA4B,GAAG,CAAC;GA0C7C;EAvCC,MAAM;IACJ,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IAE1D,MAAM,SAAS,GAAG,UAAU,CAC1B,kBAAkB,EAClB,4BAA4B,IAAI,CAAC,MAAM,EAAE,EACzC,0BAA0B,IAAI,CAAC,IAAI,EAAE,CACtC,CAAC;IAEF,QACE,EAAC,IAAI,QACH,cACE,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,IAAI,KACR,YAAM,KAAK,EAAC,wBAAwB,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAS,CACnE,EACD,YAAM,KAAK,EAAC,mCAAmC,IAC7C,YAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACxD,IAAI,CAAC,WAAW,KACf,YAAM,KAAK,EAAC,+BAA+B,IACxC,IAAI,CAAC,WAAW,CACZ,CACR,CACI,EACN,UAAU,KACT,YACE,KAAK,EAAC,0BAA0B,EAChC,SAAS,EAAE,IAAI,CAAC,MAAM,GAChB,CACT,CACM,CACJ,EACP;GACH;;;;;;","names":[],"sources":["./src/components/flip-action-list-item/flip-action-list-item.css?tag=flip-action-list-item&encapsulation=shadow","./src/components/flip-action-list-item/flip-action-list-item.tsx"],"sourcesContent":[":host {\n display: block;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.action-list-item {\n display: inline-flex;\n width: 100%;\n min-width: 15rem;\n margin: 0;\n padding: var(--s-space-12) var(--s-space-16);\n justify-content: flex-start;\n align-items: center;\n border: none;\n color: var(--s-text-default);\n background-color: var(--s-surface-overlay-default);\n font: inherit;\n line-height: var(--s-line-height-base);\n text-align: left;\n cursor: pointer;\n gap: var(--s-space-12);\n\n &:hover {\n background-color: var(--s-surface-overlay-hovered);\n }\n\n &:focus {\n background-color: var(--s-surface-overlay-hovered);\n outline: none;\n }\n\n &:active {\n background-color: var(--s-surface-overlay-pressed);\n }\n\n &:disabled {\n background-color: var(--s-surface-overlay-default);\n cursor: default;\n\n & .action-list-item__label,\n & .action-list-item__description {\n color: var(--s-text-disabled);\n }\n\n & .action-list-item__icon {\n color: var(--s-icon-disabled);\n }\n }\n}\n\n.action-list-item--size-l {\n padding: var(--s-space-16);\n}\n\n.action-list-item--intent-critical {\n &:not(:disabled) {\n & .action-list-item__label {\n color: var(--s-text-critical);\n }\n\n & .action-list-item__icon {\n color: var(--s-icon-critical);\n }\n }\n}\n\n.action-list-item__icon {\n display: inline-flex;\n flex-shrink: 0;\n color: var(--s-icon-default);\n}\n\n.action-list-item__label-container {\n display: inline-flex;\n min-width: 0;\n flex-grow: 1;\n align-items: flex-start;\n flex-direction: column;\n}\n\n.action-list-item__label {\n overflow: hidden;\n max-width: 100%;\n padding-top: 0.0625rem;\n font-weight: var(--s-font-weight-medium);\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.action-list-item__description {\n color: var(--s-text-subdued);\n}\n\n.action-list-item__suffix {\n display: inline-flex;\n flex-shrink: 0;\n color: var(--s-icon-highlight);\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipActionListItemIntent = \"default\" \| \"critical\";\n\nexport type FlipActionListItemSize = \"m\" \| \"l\";\n\n@Component({\n shadow: true,\n styleUrl: \"flip-action-list-item.css\",\n tag: \"flip-action-list-item\",\n})\nexport class FlipActionListItem {\n @Prop() disabled?: boolean;\n @Prop() description?: string;\n @Prop() icon?: string;\n @Prop() intent?: FlipActionListItemIntent = \"default\";\n @Prop() label!: string;\n @Prop() size?: FlipActionListItemSize = \"m\";\n @Prop() suffix?: string;\n\n render() {\n const showSuffix = Boolean(this.suffix) && !this.disabled;\n\n const className = classnames(\n \"action-list-item\",\n `action-list-item--intent-${this.intent}`,\n `action-list-item--size-${this.size}`\n );\n\n return (\n <Host>\n <button\n class={className}\n disabled={this.disabled}\n role=\"menuitem\"\n tabIndex={-1}\n type=\"button\"\n >\n {this.icon && (\n <span class=\"action-list-item__icon\" innerHTML={this.icon}></span>\n )}\n <span class=\"action-list-item__label-container\">\n <span class=\"action-list-item__label\">{this.label}</span>\n {this.description && (\n <span class=\"action-list-item__description\">\n {this.description}\n </span>\n )}\n </span>\n {showSuffix && (\n <span\n class=\"action-list-item__suffix\"\n innerHTML={this.suffix}\n ></span>\n )}\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"flip-action-list-item.entry.js","mappings":";;;;AAAA,MAAM,qBAAqB,GAAG,oxDAAoxD;;MCYryD,kBAAkB;EAL/B;;IASU,WAAM,GAA8B,SAAS,CAAC;IAE9C,SAAI,GAA4B,GAAG,CAAC;GA0C7C;EAvCC,MAAM;IACJ,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IAE1D,MAAM,SAAS,GAAG,UAAU,CAC1B,kBAAkB,EAClB,4BAA4B,IAAI,CAAC,MAAM,EAAE,EACzC,0BAA0B,IAAI,CAAC,IAAI,EAAE,CACtC,CAAC;IAEF,QACE,EAAC,IAAI,QACH,cACE,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,CAAC,CAAC,EACZ,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,IAAI,KACR,YAAM,KAAK,EAAC,wBAAwB,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAS,CACnE,EACD,YAAM,KAAK,EAAC,mCAAmC,IAC7C,YAAM,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,KAAK,CAAQ,EACxD,IAAI,CAAC,WAAW,KACf,YAAM,KAAK,EAAC,+BAA+B,IACxC,IAAI,CAAC,WAAW,CACZ,CACR,CACI,EACN,UAAU,KACT,YACE,KAAK,EAAC,0BAA0B,EAChC,SAAS,EAAE,IAAI,CAAC,MAAM,GAChB,CACT,CACM,CACJ,EACP;GACH;;;;;;","names":[],"sources":["./src/components/flip-action-list-item/flip-action-list-item.css?tag=flip-action-list-item&encapsulation=shadow","./src/components/flip-action-list-item/flip-action-list-item.tsx"],"sourcesContent":[":host {\n display: block;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.action-list-item {\n display: inline-flex;\n width: 100%;\n min-width: 15rem;\n margin: 0;\n padding: var(--s-space-12) var(--s-space-16);\n justify-content: flex-start;\n align-items: center;\n border: none;\n color: var(--s-text-default);\n background-color: var(--s-surface-overlay-default);\n font: inherit;\n line-height: var(--s-line-height-base);\n text-align: left;\n cursor: pointer;\n gap: var(--s-space-12);\n\n &:hover {\n background-color: var(--s-surface-overlay-hovered);\n }\n\n &:focus {\n background-color: var(--s-surface-overlay-hovered);\n outline: none;\n }\n\n &:active {\n background-color: var(--s-surface-overlay-pressed);\n }\n\n &:disabled {\n background-color: var(--s-surface-overlay-default);\n cursor: default;\n\n & .action-list-item__label,\n & .action-list-item__description {\n color: var(--s-text-disabled);\n }\n\n & .action-list-item__icon {\n color: var(--s-icon-disabled);\n }\n }\n}\n\n.action-list-item--size-l {\n padding: var(--s-space-16);\n}\n\n.action-list-item--intent-critical {\n & ::part(icon) {\n color: var(--s-icon-critical);\n }\n\n &:not(:disabled) {\n & .action-list-item__label {\n color: var(--s-text-critical);\n }\n\n & .action-list-item__icon {\n color: var(--s-icon-critical);\n }\n }\n}\n\n.action-list-item__icon {\n display: inline-flex;\n flex-shrink: 0;\n color: var(--s-icon-default);\n}\n\n.action-list-item__label-container {\n display: inline-flex;\n min-width: 0;\n flex-grow: 1;\n align-items: flex-start;\n flex-direction: column;\n}\n\n.action-list-item__label {\n overflow: hidden;\n max-width: 100%;\n padding-top: 0.0625rem;\n font-weight: var(--s-font-weight-medium);\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.action-list-item__description {\n color: var(--s-text-subdued);\n}\n\n.action-list-item__suffix {\n display: inline-flex;\n flex-shrink: 0;\n color: var(--s-icon-highlight);\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipActionListItemIntent = \"default\" \| \"critical\";\n\nexport type FlipActionListItemSize = \"m\" \| \"l\";\n\n@Component({\n shadow: true,\n styleUrl: \"flip-action-list-item.css\",\n tag: \"flip-action-list-item\",\n})\nexport class FlipActionListItem {\n @Prop() disabled?: boolean;\n @Prop() description?: string;\n @Prop() icon?: string;\n @Prop() intent?: FlipActionListItemIntent = \"default\";\n @Prop() label!: string;\n @Prop() size?: FlipActionListItemSize = \"m\";\n @Prop() suffix?: string;\n\n render() {\n const showSuffix = Boolean(this.suffix) && !this.disabled;\n\n const className = classnames(\n \"action-list-item\",\n `action-list-item--intent-${this.intent}`,\n `action-list-item--size-${this.size}`\n );\n\n return (\n <Host>\n <button\n class={className}\n disabled={this.disabled}\n role=\"menuitem\"\n tabIndex={-1}\n type=\"button\"\n >\n {this.icon && (\n <span class=\"action-list-item__icon\" innerHTML={this.icon}></span>\n )}\n <span class=\"action-list-item__label-container\">\n <span class=\"action-list-item__label\">{this.label}</span>\n {this.description && (\n <span class=\"action-list-item__description\">\n {this.description}\n </span>\n )}\n </span>\n {showSuffix && (\n <span\n class=\"action-list-item__suffix\"\n innerHTML={this.suffix}\n ></span>\n )}\n </button>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/flip-avatar-group.entry.js CHANGED Viewed

@@ -8,12 +8,22 @@ const FlipAvatarGroup = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
   }
+  componentDidLoad() {
+    this.forceBadgeProps();
+  }
+  forceBadgeProps() {
+    if (!Boolean(this.badge)) {
+      return;
+    }
+    const badge = this.badgeEl.querySelector("flip-badge");
+    badge === null || badge === void 0 ? void 0 : badge.setAttribute("size", "m");
+  }
   render() {
     const className = classnames("avatar-group", {
       "avatar-group--has-badge": Boolean(this.badge),
     });
     const badgeClassName = classnames("avatar-group__badge");
-    return (h(Host, null, h("div", { class: className, role: "group" }, h("slot", null), this.badge && (h("span", { class: badgeClassName, innerHTML: this.badge })))));
+    return (h(Host, null, h("div", { class: className, role: "group" }, h("slot", null), this.badge && (h("span", { class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) })))));
   }
 };
 FlipAvatarGroup.style = flipAvatarGroupCss;

package/dist/esm/flip-avatar-group.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"flip-avatar-group.entry.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,2tBAA2tB;;MCWzuB,eAAe;;;;~~EAG1B~~,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAAC,cAAc,EAAE;MAC3C,yBAAyB,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;KAC/C,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAEzD,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO,IACjC,eAAa,EACZ,IAAI,CAAC,KAAK,KACT,~~YAAM~~,KAAK,EAAE,cAAc,~~EAAE~~,SAAS,EAAE,IAAI,CAAC,KAAK,~~GAAS~~,~~CAC5D~~,CACG,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/flip-avatar-group/flip-avatar-group.css?tag=flip-avatar-group&encapsulation=shadow","./src/components/flip-avatar-group/flip-avatar-group.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.avatar-group {\n position: relative;\n display: inline-grid;\n grid-template-rows: repeat(8, 1fr);\n grid-template-columns: repeat(8, 1fr);\n\n & ::slotted(:first-of-type) {\n z-index: 1;\n display: inline-flex;\n border: 0.25rem solid var(--flip-avatar-group-border-color);\n border-radius: 50%;\n grid-column-start: 1;\n grid-column-end: 7;\n grid-row-start: 3;\n grid-row-end: 9;\n }\n\n & ::slotted(:nth-of-type(2)) {\n z-index: 0;\n display: inline-flex;\n border: 0.25rem solid var(--flip-avatar-group-border-color);\n border-radius: 50%;\n grid-column-start: 3;\n grid-column-end: 9;\n grid-row-start: 1;\n grid-row-end: 7;\n }\n}\n\n.avatar-group__badge {\n position: absolute;\n z-index: 2;\n right: 0;\n bottom: 0;\n display: inline-flex;\n width: 1.5rem;\n height: 1.5rem;\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n/*\n @slot slot - Your avatar components\n */\n@Component({\n shadow: true,\n styleUrl: \"flip-avatar-group.css\",\n tag: \"flip-avatar-group\",\n})\nexport class FlipAvatarGroup {\n @Prop() badge?: string;\n\n render() {\n const className = classnames(\"avatar-group\", {\n \"avatar-group--has-badge\": Boolean(this.badge),\n });\n\n const badgeClassName = classnames(\"avatar-group__badge\");\n\n return (\n <Host>\n <div class={className} role=\"group\">\n <slot></slot>\n {this.badge && (\n <span class={badgeClassName} innerHTML={this.badge}></span>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"flip-avatar-group.entry.js","mappings":";;;;AAAA,MAAM,kBAAkB,GAAG,2tBAA2tB;;MCWzuB,eAAe;;;;EAK1B,gBAAgB;IACd,IAAI,CAAC,eAAe,EAAE,CAAC;GACxB;EAEO,eAAe;IACrB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;MACxB,OAAO;KACR;IAED,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IAEvD,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,YAAY,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;GAClC;EAED,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAAC,cAAc,EAAE;MAC3C,yBAAyB,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;KAC/C,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,UAAU,CAAC,qBAAqB,CAAC,CAAC;IAEzD,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO,IACjC,eAAa,EACZ,IAAI,CAAC,KAAK,KACT,YACE,KAAK,EAAE,cAAc,EACrB,SAAS,EAAE,IAAI,CAAC,KAAK,EACrB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC,GAC1B,CACT,CACG,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/flip-avatar-group/flip-avatar-group.css?tag=flip-avatar-group&encapsulation=shadow","./src/components/flip-avatar-group/flip-avatar-group.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.avatar-group {\n position: relative;\n display: inline-grid;\n grid-template-rows: repeat(8, 1fr);\n grid-template-columns: repeat(8, 1fr);\n\n & ::slotted(:first-of-type) {\n z-index: 1;\n display: inline-flex;\n border: 0.25rem solid var(--flip-avatar-group-border-color);\n border-radius: 50%;\n grid-column-start: 1;\n grid-column-end: 7;\n grid-row-start: 3;\n grid-row-end: 9;\n }\n\n & ::slotted(:nth-of-type(2)) {\n z-index: 0;\n display: inline-flex;\n border: 0.25rem solid var(--flip-avatar-group-border-color);\n border-radius: 50%;\n grid-column-start: 3;\n grid-column-end: 9;\n grid-row-start: 1;\n grid-row-end: 7;\n }\n}\n\n.avatar-group__badge {\n position: absolute;\n z-index: 2;\n right: 0;\n bottom: 0;\n display: inline-flex;\n width: 1.5rem;\n height: 1.5rem;\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n/*\n @slot slot - Your avatar components\n */\n@Component({\n shadow: true,\n styleUrl: \"flip-avatar-group.css\",\n tag: \"flip-avatar-group\",\n})\nexport class FlipAvatarGroup {\n @Prop() badge?: string;\n\n private badgeEl: HTMLElement;\n\n componentDidLoad() {\n this.forceBadgeProps();\n }\n\n private forceBadgeProps() {\n if (!Boolean(this.badge)) {\n return;\n }\n\n const badge = this.badgeEl.querySelector(\"flip-badge\");\n\n badge?.setAttribute(\"size\", \"m\");\n }\n\n render() {\n const className = classnames(\"avatar-group\", {\n \"avatar-group--has-badge\": Boolean(this.badge),\n });\n\n const badgeClassName = classnames(\"avatar-group__badge\");\n\n return (\n <Host>\n <div class={className} role=\"group\">\n <slot></slot>\n {this.badge && (\n <span\n class={badgeClassName}\n innerHTML={this.badge}\n ref={(el) => (this.badgeEl = el)}\n ></span>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/flip-avatar.entry.js CHANGED Viewed

@@ -46,9 +46,19 @@ const FlipAvatar = class {
       }
     };
   }
+  componentDidLoad() {
+    this.forceBadgeProps();
+  }
   watchSrcProp() {
     this.imageAvailable = undefined;
   }
+  forceBadgeProps() {
+    if (!Boolean(this.badge)) {
+      return;
+    }
+    const badge = this.badgeEl.querySelector("flip-badge");
+    badge === null || badge === void 0 ? void 0 : badge.setAttribute("size", "m");
+  }
   render() {
     const showImage = Boolean(this.src) &&
       (this.imageAvailable || this.imageAvailable === undefined);
@@ -63,7 +73,7 @@ const FlipAvatar = class {
       "avatar--interactive": this.interactive,
     });
     const badgeClassName = classnames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
-    return (h(Host, { "aria-label": this.label, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { class: className, part: "avatar" }, showImage && (h("span", { class: "avatar__image" }, h("img", { alt: "", height: flipAvatarSizeMappings[this.size], onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: flipAvatarSizeMappings[this.size] }))), showInitials && (h("span", { class: "avatar__initials" }, h("span", null, this.initials))), showIcon && h("span", { class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { class: "avatar__icon" }, h("flip-icon-person", null))), showBadge && (h("span", { class: badgeClassName, innerHTML: this.badge }))), this.showLabel && (h("span", { "aria-hidden": true, class: "avatar__label" }, this.label))));
+    return (h(Host, { "aria-label": this.label, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { class: className, part: "avatar" }, showImage && (h("span", { class: "avatar__image" }, h("img", { alt: "", height: flipAvatarSizeMappings[this.size], onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: flipAvatarSizeMappings[this.size] }))), showInitials && (h("span", { class: "avatar__initials" }, h("span", null, this.initials))), showIcon && h("span", { class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { class: "avatar__icon" }, h("flip-icon-person", null))), showBadge && (h("span", { class: badgeClassName, innerHTML: this.badge, ref: (el) => (this.badgeEl = el) }))), this.showLabel && (h("span", { "aria-hidden": true, class: "avatar__label" }, this.label))));
   }
   get element() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/flip-avatar.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"flip-avatar.entry.js","mappings":"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","names":[],"sources":["./src/components/flip-avatar/flip-avatar.css?tag=flip-avatar&encapsulation=shadow","./src/components/flip-avatar/flip-avatar.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n align-items: center;\n flex-direction: column;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.avatar {\n position: relative;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n}\n\n.avatar--has-icon {\n color: var(--s-icon-default);\n background-color: var(--s-surface-raised-default);\n}\n\n.avatar--has-initials {\n padding-right: 0;\n padding-left: 0;\n color: #fff;\n}\n\n.avatar--interactive {\n cursor: pointer;\n\n &:focus {\n outline-color: var(--s-focus-default);\n }\n}\n\n.avatar--size-xs {\n width: 1.75rem;\n height: 1.75rem;\n font-size: 0.75rem;\n\n &.avatar--has-icon {\n padding-right: 0.4375rem;\n padding-left: 0.4375rem;\n }\n\n &.avatar--variant-square,\n &.avatar--variant-square .avatar__image,\n &.avatar--variant-square .avatar__initials {\n border-radius: 0.5rem;\n }\n}\n\n.avatar--size-s {\n width: 2rem;\n height: 2rem;\n font-size: 0.75rem;\n\n &.avatar--has-icon {\n padding-right: var(--s-space-8);\n padding-left: var(--s-space-8);\n }\n\n &.avatar--variant-square,\n &.avatar--variant-square .avatar__image,\n &.avatar--variant-square .avatar__initials {\n border-radius: 0.5rem;\n }\n}\n\n.avatar--size-m {\n width: 2.5rem;\n height: 2.5rem;\n font-size: var(--s-font-size-base);\n\n &.avatar--has-icon {\n padding-right: 0.625rem;\n padding-left: 0.625rem;\n }\n\n &.avatar--variant-square,\n &.avatar--variant-square .avatar__image,\n &.avatar--variant-square .avatar__initials {\n border-radius: 0.625rem;\n }\n}\n\n.avatar--size-l {\n width: 3rem;\n height: 3rem;\n font-size: var(--s-font-size-lg);\n\n &.avatar--has-icon {\n padding-right: var(--s-space-12);\n padding-left: var(--s-space-12);\n }\n\n &.avatar--variant-square,\n &.avatar--variant-square .avatar__image,\n &.avatar--variant-square .avatar__initials {\n border-radius: 0.75rem;\n }\n}\n\n.avatar--size-xl {\n width: 4rem;\n height: 4rem;\n font-size: var(--s-font-size-xl);\n\n &.avatar--has-icon {\n padding-right: var(--s-space-16);\n padding-left: var(--s-space-16);\n }\n\n &.avatar--variant-square,\n &.avatar--variant-square .avatar__image,\n &.avatar--variant-square .avatar__initials {\n border-radius: 1rem;\n }\n}\n\n.avatar--size-2xl {\n width: 9rem;\n height: 9rem;\n font-size: 3.375rem;\n\n &.avatar--has-icon {\n padding-right: var(--s-space-32);\n padding-left: var(--s-space-32);\n }\n\n &.avatar--variant-square,\n &.avatar--variant-square .avatar__image,\n &.avatar--variant-square .avatar__initials {\n border-radius: 2.25rem;\n }\n}\n\n.avatar__image {\n overflow: hidden;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n\n & > img {\n width: 100%;\n height: 100%;\n }\n}\n\n.avatar__icon {\n display: inline-flex;\n width: 100%;\n height: 100%;\n\n & > * {\n width: 100%;\n height: 100%;\n }\n\n & > *::part(icon) {\n width: 100%;\n height: 100%;\n }\n}\n\n.avatar__initials {\n display: inline-flex;\n width: 100%;\n min-width: 0;\n height: 100%;\n padding-right: 0.0625rem;\n padding-left: 0.0625rem;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n background-color: var(--s-decorative-6-default);\n\n & > span {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n}\n\n.avatar__badge {\n position: absolute;\n bottom: 0;\n left: 55%;\n display: inline-flex;\n min-width: 1.5rem;\n height: 1.5rem;\n transform: translate3d(0, 25%, 0);\n}\n\n.avatar__badge--position-top {\n top: 0;\n bottom: auto;\n transform: translate3d(0, -25%, 0);\n}\n\n.avatar__label {\n margin-top: var(--s-space-4);\n color: var(--s-icon-default);\n font-size: var(--s-font-size-sm);\n font-weight: var(--s-font-weight-medium);\n line-height: var(--s-line-height-sm);\n text-align: center;\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipAvatarBadgePosition = \"bottom\" \| \"top\";\nexport type FlipAvatarSize = \"xs\" \| \"s\" \| \"m\" \| \"l\" \| \"xl\" \| \"2xl\";\nexport type FlipAvatarVariant = \"round\" \| \"square\";\n\nconst flipAvatarSizeMappings: { [key in FlipAvatarSize]: number } = {\n xs: 28,\n s: 32,\n m: 40,\n l: 48,\n xl: 64,\n \"2xl\": 144,\n};\n\n@Component({\n shadow: true,\n styleUrl: \"flip-avatar.css\",\n tag: \"flip-avatar\",\n})\nexport class FlipAvatar {\n @Element() element: HTMLElement;\n\n @Prop() badge?: string;\n @Prop() badgePosition?: FlipAvatarBadgePosition = \"bottom\";\n @Prop() icon?: string;\n @Prop() initials?: string;\n @Prop() interactive?: boolean = false;\n @Prop() label!: string;\n @Prop() showLabel?: boolean = false;\n @Prop() size?: FlipAvatarSize = \"m\";\n @Prop() src?: string;\n @Prop() variant?: FlipAvatarVariant = \"round\";\n\n @State() imageAvailable: boolean \| undefined;\n\n @Watch(\"src\")\n watchSrcProp() {\n this.imageAvailable = undefined;\n }\n\n private setImageAvailable = () => {\n this.imageAvailable = true;\n };\n\n private setImageUnavailable = () => {\n this.imageAvailable = false;\n };\n\n private onKeydown = (event: KeyboardEvent) => {\n // The interactive avatar is activated by the space key on the keyup event,\n // but the default action for space is already triggered on keydown. It\n // needs to be prevented to stop scrolling the page before activating the\n // avatar.\n if (event.code === \"Space\") {\n event.preventDefault();\n } else if (event.code === \"Enter\") {\n event.preventDefault();\n\n this.element.click();\n }\n };\n\n private onKeyup = (event: KeyboardEvent) => {\n if (event.code === \"Space\") {\n event.preventDefault();\n\n this.element.click();\n }\n };\n\n render() {\n const showImage =\n Boolean(this.src) &&\n (this.imageAvailable \|\| this.imageAvailable === undefined);\n\n const showInitials = !showImage && Boolean(this.initials);\n const showIcon = !showImage && !showInitials && Boolean(this.icon);\n const showFallbackIcon = !showImage && !showInitials && !showIcon;\n const showBadge = Boolean(this.badge) && this.size === \"m\";\n\n const role = this.interactive ? \"button\" : \"img\";\n\n const className = classnames(\n \"avatar\",\n `avatar--size-${this.size}`,\n `avatar--variant-${this.variant}`,\n {\n \"avatar--has-icon\": showIcon \|\| showFallbackIcon,\n \"avatar--has-initials\": showInitials,\n \"avatar--interactive\": this.interactive,\n }\n );\n\n const badgeClassName = classnames(\n \"avatar__badge\",\n `avatar__badge--position-${this.badgePosition}`\n );\n\n return (\n <Host\n aria-label={this.label}\n onKeydown={this.interactive ? this.onKeydown : undefined}\n onKeyup={this.interactive ? this.onKeyup : undefined}\n role={role}\n tabIndex={this.interactive ? 0 : undefined}\n >\n <span class={className} part=\"avatar\">\n {showImage && (\n <span class=\"avatar__image\">\n <img\n alt=\"\"\n height={flipAvatarSizeMappings[this.size]}\n onError={this.setImageUnavailable}\n onLoad={this.setImageAvailable}\n src={this.src}\n width={flipAvatarSizeMappings[this.size]}\n />\n </span>\n )}\n {showInitials && (\n <span class=\"avatar__initials\">\n <span>{this.initials}</span>\n </span>\n )}\n {showIcon && <span class=\"avatar__icon\" innerHTML={this.icon}></span>}\n {showFallbackIcon && (\n <span class=\"avatar__icon\">\n <flip-icon-person></flip-icon-person>\n </span>\n )}\n {showBadge && (\n <span class={badgeClassName} innerHTML={this.badge}></span>\n )}\n </span>\n\n {this.showLabel && (\n <span aria-hidden class=\"avatar__label\">\n {this.label}\n </span>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"flip-avatar.entry.js","mappings":"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","names":[],"sources":["./src/components/flip-avatar/flip-avatar.css?tag=flip-avatar&encapsulation=shadow","./src/components/flip-avatar/flip-avatar.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n align-items: center;\n flex-direction: column;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.avatar {\n position: relative;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n}\n\n.avatar--has-icon {\n color: var(--s-icon-default);\n background-color: var(--s-surface-raised-default);\n}\n\n.avatar--has-initials {\n padding-right: 0;\n padding-left: 0;\n color: #fff;\n}\n\n.avatar--interactive {\n cursor: pointer;\n\n &:focus {\n outline-color: var(--s-focus-default);\n }\n}\n\n.avatar--size-xs {\n width: 1.75rem;\n height: 1.75rem;\n font-size: 0.75rem;\n\n &.avatar--has-icon {\n padding-right: 0.4375rem;\n padding-left: 0.4375rem;\n }\n\n &.avatar--variant-square,\n &.avatar--variant-square .avatar__image,\n &.avatar--variant-square .avatar__initials {\n border-radius: 0.5rem;\n }\n}\n\n.avatar--size-s {\n width: 2rem;\n height: 2rem;\n font-size: 0.75rem;\n\n &.avatar--has-icon {\n padding-right: var(--s-space-8);\n padding-left: var(--s-space-8);\n }\n\n &.avatar--variant-square,\n &.avatar--variant-square .avatar__image,\n &.avatar--variant-square .avatar__initials {\n border-radius: 0.5rem;\n }\n}\n\n.avatar--size-m {\n width: 2.5rem;\n height: 2.5rem;\n font-size: var(--s-font-size-base);\n\n &.avatar--has-icon {\n padding-right: 0.625rem;\n padding-left: 0.625rem;\n }\n\n &.avatar--variant-square,\n &.avatar--variant-square .avatar__image,\n &.avatar--variant-square .avatar__initials {\n border-radius: 0.625rem;\n }\n}\n\n.avatar--size-l {\n width: 3rem;\n height: 3rem;\n font-size: var(--s-font-size-lg);\n\n &.avatar--has-icon {\n padding-right: var(--s-space-12);\n padding-left: var(--s-space-12);\n }\n\n &.avatar--variant-square,\n &.avatar--variant-square .avatar__image,\n &.avatar--variant-square .avatar__initials {\n border-radius: 0.75rem;\n }\n}\n\n.avatar--size-xl {\n width: 4rem;\n height: 4rem;\n font-size: var(--s-font-size-xl);\n\n &.avatar--has-icon {\n padding-right: var(--s-space-16);\n padding-left: var(--s-space-16);\n }\n\n &.avatar--variant-square,\n &.avatar--variant-square .avatar__image,\n &.avatar--variant-square .avatar__initials {\n border-radius: 1rem;\n }\n}\n\n.avatar--size-2xl {\n width: 9rem;\n height: 9rem;\n font-size: 3.375rem;\n\n &.avatar--has-icon {\n padding-right: var(--s-space-32);\n padding-left: var(--s-space-32);\n }\n\n &.avatar--variant-square,\n &.avatar--variant-square .avatar__image,\n &.avatar--variant-square .avatar__initials {\n border-radius: 2.25rem;\n }\n}\n\n.avatar__image {\n overflow: hidden;\n width: 100%;\n height: 100%;\n border-radius: 50%;\n\n & > img {\n width: 100%;\n height: 100%;\n }\n}\n\n.avatar__icon {\n display: inline-flex;\n width: 100%;\n height: 100%;\n\n & > * {\n width: 100%;\n height: 100%;\n }\n\n & > *::part(icon) {\n width: 100%;\n height: 100%;\n }\n}\n\n.avatar__initials {\n display: inline-flex;\n width: 100%;\n min-width: 0;\n height: 100%;\n padding-right: 0.0625rem;\n padding-left: 0.0625rem;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n background-color: var(--s-decorative-6-default);\n\n & > span {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n}\n\n.avatar__badge {\n position: absolute;\n bottom: 0;\n left: 55%;\n display: inline-flex;\n min-width: 1.5rem;\n height: 1.5rem;\n transform: translate3d(0, 25%, 0);\n}\n\n.avatar__badge--position-top {\n top: 0;\n bottom: auto;\n transform: translate3d(0, -25%, 0);\n}\n\n.avatar__label {\n margin-top: var(--s-space-4);\n color: var(--s-icon-default);\n font-size: var(--s-font-size-sm);\n font-weight: var(--s-font-weight-medium);\n line-height: var(--s-line-height-sm);\n text-align: center;\n}\n","import { Component, Element, h, Host, Prop, State, Watch } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipAvatarBadgePosition = \"bottom\" \| \"top\";\nexport type FlipAvatarSize = \"xs\" \| \"s\" \| \"m\" \| \"l\" \| \"xl\" \| \"2xl\";\nexport type FlipAvatarVariant = \"round\" \| \"square\";\n\nconst flipAvatarSizeMappings: { [key in FlipAvatarSize]: number } = {\n xs: 28,\n s: 32,\n m: 40,\n l: 48,\n xl: 64,\n \"2xl\": 144,\n};\n\n@Component({\n shadow: true,\n styleUrl: \"flip-avatar.css\",\n tag: \"flip-avatar\",\n})\nexport class FlipAvatar {\n @Element() element: HTMLElement;\n\n @Prop() badge?: string;\n @Prop() badgePosition?: FlipAvatarBadgePosition = \"bottom\";\n @Prop() icon?: string;\n @Prop() initials?: string;\n @Prop() interactive?: boolean = false;\n @Prop() label!: string;\n @Prop() showLabel?: boolean = false;\n @Prop() size?: FlipAvatarSize = \"m\";\n @Prop() src?: string;\n @Prop() variant?: FlipAvatarVariant = \"round\";\n\n @State() imageAvailable: boolean \| undefined;\n\n private badgeEl: HTMLElement;\n\n componentDidLoad() {\n this.forceBadgeProps();\n }\n\n @Watch(\"src\")\n watchSrcProp() {\n this.imageAvailable = undefined;\n }\n\n private forceBadgeProps() {\n if (!Boolean(this.badge)) {\n return;\n }\n\n const badge = this.badgeEl.querySelector(\"flip-badge\");\n\n badge?.setAttribute(\"size\", \"m\");\n }\n\n private setImageAvailable = () => {\n this.imageAvailable = true;\n };\n\n private setImageUnavailable = () => {\n this.imageAvailable = false;\n };\n\n private onKeydown = (event: KeyboardEvent) => {\n // The interactive avatar is activated by the space key on the keyup event,\n // but the default action for space is already triggered on keydown. It\n // needs to be prevented to stop scrolling the page before activating the\n // avatar.\n if (event.code === \"Space\") {\n event.preventDefault();\n } else if (event.code === \"Enter\") {\n event.preventDefault();\n\n this.element.click();\n }\n };\n\n private onKeyup = (event: KeyboardEvent) => {\n if (event.code === \"Space\") {\n event.preventDefault();\n\n this.element.click();\n }\n };\n\n render() {\n const showImage =\n Boolean(this.src) &&\n (this.imageAvailable \|\| this.imageAvailable === undefined);\n\n const showInitials = !showImage && Boolean(this.initials);\n const showIcon = !showImage && !showInitials && Boolean(this.icon);\n const showFallbackIcon = !showImage && !showInitials && !showIcon;\n const showBadge = Boolean(this.badge) && this.size === \"m\";\n\n const role = this.interactive ? \"button\" : \"img\";\n\n const className = classnames(\n \"avatar\",\n `avatar--size-${this.size}`,\n `avatar--variant-${this.variant}`,\n {\n \"avatar--has-icon\": showIcon \|\| showFallbackIcon,\n \"avatar--has-initials\": showInitials,\n \"avatar--interactive\": this.interactive,\n }\n );\n\n const badgeClassName = classnames(\n \"avatar__badge\",\n `avatar__badge--position-${this.badgePosition}`\n );\n\n return (\n <Host\n aria-label={this.label}\n onKeydown={this.interactive ? this.onKeydown : undefined}\n onKeyup={this.interactive ? this.onKeyup : undefined}\n role={role}\n tabIndex={this.interactive ? 0 : undefined}\n >\n <span class={className} part=\"avatar\">\n {showImage && (\n <span class=\"avatar__image\">\n <img\n alt=\"\"\n height={flipAvatarSizeMappings[this.size]}\n onError={this.setImageUnavailable}\n onLoad={this.setImageAvailable}\n src={this.src}\n width={flipAvatarSizeMappings[this.size]}\n />\n </span>\n )}\n {showInitials && (\n <span class=\"avatar__initials\">\n <span>{this.initials}</span>\n </span>\n )}\n {showIcon && <span class=\"avatar__icon\" innerHTML={this.icon}></span>}\n {showFallbackIcon && (\n <span class=\"avatar__icon\">\n <flip-icon-person></flip-icon-person>\n </span>\n )}\n {showBadge && (\n <span\n class={badgeClassName}\n innerHTML={this.badge}\n ref={(el) => (this.badgeEl = el)}\n ></span>\n )}\n </span>\n\n {this.showLabel && (\n <span aria-hidden class=\"avatar__label\">\n {this.label}\n </span>\n )}\n </Host>\n );\n }\n}\n"],"version":3}