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

@getflip/swirl-components 0.2.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1766) hide show

package/dist/cjs/flip-radio.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-bd89db61.js');
-const index$1 = require('./index-b9715722.js');
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.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)}";
@@ -35,3 +36,5 @@ const FlipRadio = class {
 FlipRadio.style = flipRadioCss;
 exports.flip_radio = FlipRadio;
+//# sourceMappingURL=flip-radio.cjs.entry.js.map

package/dist/cjs/flip-radio.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-radio.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,YAAY,GAAG,0vFAA0vF;;MCiBlwF,SAAS;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,GAAGA,kBAAU,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,QACEC,QAACC,UAAI,QACHD,mBAAO,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,IAC5CA,kBAAM,KAAK,EAAC,gBAAgB,IAC1BA,sCACEA,mCACgB,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,EACvBA,iCAAkB,MAAM,EAAC,KAAK,EAAC,YAAY,GAAQ,CAC9C,EACPA,kBAAM,KAAK,EAAC,wBAAwB,IACjC,IAAI,CAAC,KAAK,IAAIA,kBAAM,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,KAAK,CAAQ,EAC5D,IAAI,CAAC,WAAW,KACfA,kBAAM,KAAK,EAAC,oBAAoB,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC3D,CACI,CACD,CACH,EACP;GACH;;;;;;","names":["classnames","h","Host"],"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}

package/dist/cjs/flip-resource-list-file-item.cjs.entry.js CHANGED Viewed

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-bd89db61.js');
-const index$1 = require('./index-b9715722.js');
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.js');
-const flipResourceListFileItemCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-file-item{position:relative;display:flex;width:100%;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);line-height:var(--s-line-height-base);gap:var(--s-space-12)}.resource-list-file-item:focus{background-color:var(--s-background-hovered);outline:none}.resource-list-file-item--has-control .resource-list-file-item__label-container{padding-right:calc(var(--s-space-12) + 2.5rem)}.resource-list-file-item__icon{color:var(--s-icon-highlight)}.resource-list-file-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;flex-grow:1;justify-content:center;flex-direction:column}.resource-list-file-item__label-container:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12) + 0.0625rem);left:0;height:0.0625rem;background-color:var(--s-border-default);content:\"\"}.resource-list-file-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__description{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__error-message{margin-top:var(--s-space-2)}.resource-list-file-item__remove-button{position:absolute;top:50%;right:var(--s-space-16);display:inline-flex;transform:translateY(-50%)}.resource-list-file-item__spinner{position:absolute;top:50%;right:var(--s-space-24);display:inline-flex;transform:translateY(-50%)}";
+const flipResourceListFileItemCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-file-item{position:relative;display:flex;width:100%;padding:var(--s-space-12) var(--s-space-16);align-items:center;background-color:var(--s-background-default);line-height:var(--s-line-height-base);gap:var(--s-space-12)}.resource-list-file-item:focus{background-color:var(--s-background-hovered);outline:none}.resource-list-file-item--has-control .resource-list-file-item__label-container{padding-right:calc(var(--s-space-12) + 2.5rem)}.resource-list-file-item__icon{color:var(--s-icon-highlight)}.resource-list-file-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;flex-grow:1;justify-content:center;flex-direction:column}.resource-list-file-item__label-container:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:\"\"}.resource-list-file-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__description{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-file-item__error-message{margin-top:var(--s-space-2)}.resource-list-file-item__remove-button{position:absolute;top:50%;right:var(--s-space-16);display:inline-flex;transform:translateY(-50%)}.resource-list-file-item__spinner{position:absolute;top:50%;right:var(--s-space-24);display:inline-flex;transform:translateY(-50%)}";
 const FlipResourceListFileItem = class {
   constructor(hostRef) {
@@ -28,3 +29,5 @@ const FlipResourceListFileItem = class {
 FlipResourceListFileItem.style = flipResourceListFileItemCss;
 exports.flip_resource_list_file_item = FlipResourceListFileItem;
+//# sourceMappingURL=flip-resource-list-file-item.cjs.entry.js.map

package/dist/cjs/flip-resource-list-file-item.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-resource-list-file-item.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,2BAA2B,GAAG,2kDAA2kD;;MCQlmD,wBAAwB;EALrC;;;IAQU,SAAI,GAAY,mCAAmC,CAAC;IAIpD,sBAAiB,GAAY,aAAa,CAAC;GA6DpD;EAzDC,MAAM;IACJ,MAAM,SAAS,GAAG,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC7C,MAAM,eAAe,GAAG,CAAC,SAAS,IAAI,OAAO,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAChE,MAAM,WAAW,GAAG,CAAC,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC;IAC/C,MAAM,gBAAgB,GAAG,IAAI,CAAC,SAAS,IAAI,CAAC,WAAW,CAAC;IAExD,MAAM,SAAS,GAAGA,kBAAU,CAAC,yBAAyB,EAAE;MACtD,sCAAsC,EAAE,WAAW,IAAI,gBAAgB;KACxE,CAAC,CAAC;IAEH,QACEC,QAACC,UAAI,IAAC,IAAI,EAAC,KAAK,IACdD,iBAAK,KAAK,EAAE,SAAS,EAAE,IAAI,EAAC,UAAU,IACpCA,kBACE,KAAK,EAAC,+BAA+B,EACrC,SAAS,EAAE,IAAI,CAAC,IAAI,GACd,EACRA,kBAAM,KAAK,EAAC,0CAA0C,IACpDA,kBAAM,KAAK,EAAC,gCAAgC,EAAC,EAAE,EAAC,OAAO,IACpD,IAAI,CAAC,KAAK,CACN,EACN,eAAe,KACdA,kBAAM,KAAK,EAAC,sCAAsC,IAC/C,IAAI,CAAC,WAAW,CACZ,CACR,EACA,SAAS,KACRA,+BACY,QAAQ,EAClB,KAAK,EAAC,wCAAwC,IAE9CA,+BACE,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,IAAI,EAAC,GAAG,GACW,CAChB,CACR,CACI,EACN,WAAW,KACVA,kBAAM,KAAK,EAAC,kCAAkC,IAC5CA,0BAAc,IAAI,EAAC,GAAG,GAAgB,CACjC,CACR,EACA,gBAAgB,KACfA,kBAAM,KAAK,EAAC,wCAAwC,IAClDA,yBACE,SAAS,QACT,IAAI,EAAC,qCAAqC,EAC1C,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAC7B,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,GACZ,CACV,CACR,CACG,CACD,EACP;GACH;;;;;;","names":["classnames","h","Host"],"sources":["./src/components/flip-resource-list-file-item/flip-resource-list-file-item.css?tag=flip-resource-list-file-item&encapsulation=shadow","./src/components/flip-resource-list-file-item/flip-resource-list-file-item.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.resource-list-file-item {\n position: relative;\n display: flex;\n width: 100%;\n padding: var(--s-space-12) var(--s-space-16);\n align-items: center;\n background-color: var(--s-background-default);\n line-height: var(--s-line-height-base);\n gap: var(--s-space-12);\n\n &:focus {\n background-color: var(--s-background-hovered);\n outline: none;\n }\n}\n\n.resource-list-file-item--has-control {\n & .resource-list-file-item__label-container {\n padding-right: calc(var(--s-space-12) + 2.5rem);\n }\n}\n\n.resource-list-file-item__icon {\n color: var(--s-icon-highlight);\n}\n\n.resource-list-file-item__label-container {\n position: relative;\n display: flex;\n min-width: 0;\n min-height: 2.875rem;\n flex-grow: 1;\n justify-content: center;\n flex-direction: column;\n\n &:after {\n position: absolute;\n right: 0;\n bottom: calc(-1 * var(--s-space-12));\n left: 0;\n height: 0.0625rem;\n background-color: var(--s-border-default);\n content: \"\";\n }\n}\n\n.resource-list-file-item__label {\n overflow: hidden;\n font-weight: var(--s-font-weight-medium);\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.resource-list-file-item__description {\n overflow: hidden;\n margin-top: var(--s-space-2);\n color: var(--s-text-subdued);\n font-size: var(--s-font-size-sm);\n line-height: var(--s-line-height-sm);\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.resource-list-file-item__error-message {\n margin-top: var(--s-space-2);\n}\n\n.resource-list-file-item__remove-button {\n position: absolute;\n top: 50%;\n right: var(--s-space-16);\n display: inline-flex;\n transform: translateY(-50%);\n}\n\n.resource-list-file-item__spinner {\n position: absolute;\n top: 50%;\n right: var(--s-space-24);\n display: inline-flex;\n transform: translateY(-50%);\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n@Component({\n shadow: true,\n styleUrl: \"flip-resource-list-file-item.css\",\n tag: \"flip-resource-list-file-item\",\n})\nexport class FlipResourceListFileItem {\n @Prop() description?: string;\n @Prop() errorMessage?: string;\n @Prop() icon?: string = \"<flip-icon-file></flip-icon-file>\";\n @Prop() label!: string;\n @Prop() loading: boolean;\n @Prop() removable?: boolean;\n @Prop() removeButtonLabel?: string = \"Remove file\";\n\n @Event() remove: EventEmitter<MouseEvent>;\n\n render() {\n const showError = Boolean(this.errorMessage);\n const showDescription = !showError && Boolean(this.description);\n const showSpinner = !showError && this.loading;\n const showRemoveButton = this.removable && !showSpinner;\n\n const className = classnames(\"resource-list-file-item\", {\n \"resource-list-file-item--has-control\": showSpinner || showRemoveButton,\n });\n\n return (\n <Host role=\"row\">\n <div class={className} role=\"gridcell\">\n <span\n class=\"resource-list-file-item__icon\"\n innerHTML={this.icon}\n ></span>\n <span class=\"resource-list-file-item__label-container\">\n <span class=\"resource-list-file-item__label\" id=\"label\">\n {this.label}\n </span>\n {showDescription && (\n <span class=\"resource-list-file-item__description\">\n {this.description}\n </span>\n )}\n {showError && (\n <span\n aria-live=\"polite\"\n class=\"resource-list-file-item__error-message\"\n >\n <flip-inline-error\n message={this.errorMessage}\n size=\"s\"\n ></flip-inline-error>\n </span>\n )}\n </span>\n {showSpinner && (\n <span class=\"resource-list-file-item__spinner\">\n <flip-spinner size=\"s\"></flip-spinner>\n </span>\n )}\n {showRemoveButton && (\n <span class=\"resource-list-file-item__remove-button\">\n <flip-button\n hideLabel\n icon=\"<flip-icon-close></flip-icon-close>\"\n label={this.removeButtonLabel}\n onClick={this.remove.emit}\n ></flip-button>\n </span>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/flip-resource-list-item.cjs.entry.js CHANGED Viewed

@@ -2,10 +2,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-bd89db61.js');
-const index$1 = require('./index-b9715722.js');
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.js');
-const flipResourceListItemCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-item{position:relative;width:100%}.resource-list-item--checked .resource-list-item__checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--has-menu .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-12))}@media (--from-tablet){.resource-list-item--selectable .resource-list-item__content{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (--from-tablet){.resource-list-item--selectable .resource-list-item__label-container{padding-right:var(--s-space-16)}}.resource-list-item--hide-divider .resource-list-item__label-container:after{display:none}.resource-list-item__content{--flip-avatar-group-border-color:var(--s-background-default);--flip-badge-border-color:var(--s-background-default);display:flex;width:100%;padding-top:var(--s-space-12);padding-right:0;padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-background-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;text-decoration:none;cursor:pointer;gap:var(--s-space-12)}.resource-list-item__content:hover:not(:disabled){background-color:var(--s-background-hovered)}.resource-list-item__content:hover:not(:disabled) .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-hovered);--flip-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:active:not(:disabled){background-color:var(--s-background-pressed)}.resource-list-item__content:active:not(:disabled) .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-pressed);--flip-badge-border-color:var(--s-background-pressed)}.resource-list-item__content:focus{background-color:var(--s-background-hovered);outline:none}.resource-list-item__content:focus .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-hovered);--flip-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:disabled{color:var(--s-text-disabled);background-color:var(--s-background-default);cursor:default}.resource-list-item__content:disabled .resource-list-item__description{color:var(--s-text-disabled)}.resource-list-item__media{display:inline-flex}.resource-list-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;padding-right:var(--s-space-16);flex-grow:1;justify-content:center;flex-direction:column}.resource-list-item__label-container:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12) + 0.0625rem);left:0;height:0.0625rem;background-color:var(--s-border-default);content:\"\"}.resource-list-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__description{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__checkbox{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.25rem;height:1.25rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%)}@media (--from-tablet){.resource-list-item__checkbox{right:auto;left:var(--s-space-16)}}.resource-list-item__checkbox-icon{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon>*::part(icon){width:1.0625rem;height:1.0625rem}.resource-list-item__meta{position:absolute;top:calc(var(--s-space-12) + var(--s-space-4));right:var(--s-space-16);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}";
+const flipResourceListItemCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.resource-list-item{position:relative;width:100%}.resource-list-item--checked .resource-list-item__checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.resource-list-item--has-menu .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 2.5rem + var(--s-space-12))}@media (--from-tablet){.resource-list-item--selectable .resource-list-item__content{padding-left:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}}.resource-list-item--selectable .resource-list-item__label-container{padding-right:calc(var(--s-space-16) + 1.5rem + var(--s-space-12))}@media (--from-tablet){.resource-list-item--selectable .resource-list-item__label-container{padding-right:var(--s-space-16)}}.resource-list-item--hide-divider .resource-list-item__label-container:after{display:none}.resource-list-item__content{--flip-avatar-group-border-color:var(--s-background-default);--flip-badge-border-color:var(--s-background-default);display:flex;width:100%;padding-top:var(--s-space-12);padding-right:0;padding-bottom:var(--s-space-12);padding-left:var(--s-space-16);align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-background-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;text-decoration:none;cursor:pointer;gap:var(--s-space-12)}.resource-list-item__content:hover:not(:disabled){background-color:var(--s-background-hovered)}.resource-list-item__content:hover:not(:disabled) .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-hovered);--flip-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:active:not(:disabled){background-color:var(--s-background-pressed)}.resource-list-item__content:active:not(:disabled) .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-pressed);--flip-badge-border-color:var(--s-background-pressed)}.resource-list-item__content:focus{background-color:var(--s-background-hovered);outline:none}.resource-list-item__content:focus .resource-list-item__media{--flip-avatar-group-border-color:var(--s-background-hovered);--flip-badge-border-color:var(--s-background-hovered)}.resource-list-item__content:disabled{color:var(--s-text-disabled);background-color:var(--s-background-default);cursor:default}.resource-list-item__content:disabled .resource-list-item__description{color:var(--s-text-disabled)}.resource-list-item__media{display:inline-flex}.resource-list-item__label-container{position:relative;display:flex;min-width:0;min-height:2.875rem;padding-right:var(--s-space-16);flex-grow:1;justify-content:center;flex-direction:column}.resource-list-item__label-container:after{position:absolute;right:0;bottom:calc(-1 * var(--s-space-12));left:0;height:0.0625rem;background-color:var(--s-border-default);content:\"\"}.resource-list-item__label{overflow:hidden;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__description{overflow:hidden;margin-top:var(--s-space-2);color:var(--s-text-subdued);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);white-space:nowrap;text-overflow:ellipsis}.resource-list-item__menu-trigger{position:absolute;top:50%;right:var(--s-space-16);transform:translateY(-50%)}.resource-list-item__checkbox{position:absolute;top:50%;right:var(--s-space-16);display:flex;width:1.25rem;height:1.25rem;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s);transform:translateY(-50%)}@media (--from-tablet){.resource-list-item__checkbox{right:auto;left:var(--s-space-16)}}.resource-list-item__checkbox-icon{display:inline-flex;width:1.0625rem;height:1.0625rem}.resource-list-item__checkbox-icon>*::part(icon){width:1.0625rem;height:1.0625rem}.resource-list-item__meta{position:absolute;top:calc(var(--s-space-12) + var(--s-space-4));right:var(--s-space-16);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}";
 const FlipResourceListItem = class {
   constructor(hostRef) {
@@ -71,3 +72,5 @@ const FlipResourceListItem = class {
 FlipResourceListItem.style = flipResourceListItemCss;
 exports.flip_resource_list_item = FlipResourceListItem;
+//# sourceMappingURL=flip-resource-list-item.cjs.entry.js.map

package/dist/cjs/flip-resource-list-item.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-resource-list-item.entry.cjs.js","mappings":"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","names":["classnames","h","Host"],"sources":["./src/components/flip-resource-list-item/flip-resource-list-item.css?tag=flip-resource-list-item&encapsulation=shadow","./src/components/flip-resource-list-item/flip-resource-list-item.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.resource-list-item {\n position: relative;\n width: 100%;\n}\n\n.resource-list-item--checked {\n & .resource-list-item__checkbox {\n border-color: var(--s-icon-highlight);\n color: var(--s-text-on-status);\n background-color: var(--s-icon-highlight);\n }\n}\n\n.resource-list-item--has-menu {\n & .resource-list-item__label-container {\n padding-right: calc(var(--s-space-16) + 2.5rem + var(--s-space-12));\n }\n}\n\n.resource-list-item--selectable {\n & .resource-list-item__content {\n @media (--from-tablet) {\n padding-left: calc(var(--s-space-16) + 1.5rem + var(--s-space-12));\n }\n }\n\n & .resource-list-item__label-container {\n padding-right: calc(var(--s-space-16) + 1.5rem + var(--s-space-12));\n\n @media (--from-tablet) {\n padding-right: var(--s-space-16);\n }\n }\n}\n\n.resource-list-item--hide-divider {\n & .resource-list-item__label-container:after {\n display: none;\n }\n}\n\n.resource-list-item__content {\n --flip-avatar-group-border-color: var(--s-background-default);\n --flip-badge-border-color: var(--s-background-default);\n\n display: flex;\n width: 100%;\n padding-top: var(--s-space-12);\n padding-right: 0;\n padding-bottom: var(--s-space-12);\n padding-left: var(--s-space-16);\n align-items: center;\n border: none;\n color: var(--s-text-default);\n background-color: var(--s-background-default);\n font: inherit;\n line-height: var(--s-line-height-base);\n text-align: left;\n text-decoration: none;\n cursor: pointer;\n gap: var(--s-space-12);\n\n &:hover:not(:disabled) {\n background-color: var(--s-background-hovered);\n\n & .resource-list-item__media {\n --flip-avatar-group-border-color: var(--s-background-hovered);\n --flip-badge-border-color: var(--s-background-hovered);\n }\n }\n\n &:active:not(:disabled) {\n background-color: var(--s-background-pressed);\n\n & .resource-list-item__media {\n --flip-avatar-group-border-color: var(--s-background-pressed);\n --flip-badge-border-color: var(--s-background-pressed);\n }\n }\n\n &:focus {\n background-color: var(--s-background-hovered);\n outline: none;\n\n & .resource-list-item__media {\n --flip-avatar-group-border-color: var(--s-background-hovered);\n --flip-badge-border-color: var(--s-background-hovered);\n }\n }\n\n &:disabled {\n color: var(--s-text-disabled);\n background-color: var(--s-background-default);\n cursor: default;\n\n & .resource-list-item__description {\n color: var(--s-text-disabled);\n }\n }\n}\n\n.resource-list-item__media {\n display: inline-flex;\n}\n\n.resource-list-item__label-container {\n position: relative;\n display: flex;\n min-width: 0;\n min-height: 2.875rem;\n padding-right: var(--s-space-16);\n flex-grow: 1;\n justify-content: center;\n flex-direction: column;\n\n &:after {\n position: absolute;\n right: 0;\n bottom: calc(-1 * var(--s-space-12));\n left: 0;\n height: 0.0625rem;\n background-color: var(--s-border-default);\n content: \"\";\n }\n}\n\n.resource-list-item__label {\n overflow: hidden;\n font-weight: var(--s-font-weight-medium);\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.resource-list-item__description {\n overflow: hidden;\n margin-top: var(--s-space-2);\n color: var(--s-text-subdued);\n font-size: var(--s-font-size-sm);\n line-height: var(--s-line-height-sm);\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n.resource-list-item__menu-trigger {\n position: absolute;\n top: 50%;\n right: var(--s-space-16);\n transform: translateY(-50%);\n}\n\n.resource-list-item__checkbox {\n position: absolute;\n top: 50%;\n right: var(--s-space-16);\n display: flex;\n width: 1.25rem;\n height: 1.25rem;\n justify-content: center;\n align-items: center;\n border: 0.125rem solid var(--s-icon-default);\n border-radius: var(--s-border-radius-s);\n transform: translateY(-50%);\n\n @media (--from-tablet) {\n right: auto;\n left: var(--s-space-16);\n }\n}\n\n.resource-list-item__checkbox-icon {\n display: inline-flex;\n width: 1.0625rem;\n height: 1.0625rem;\n\n & > *::part(icon) {\n width: 1.0625rem;\n height: 1.0625rem;\n }\n}\n\n.resource-list-item__meta {\n position: absolute;\n top: calc(var(--s-space-12) + var(--s-space-4));\n right: var(--s-space-16);\n color: var(--s-text-subdued);\n font-size: var(--s-font-size-sm);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n@Component({\n shadow: true,\n styleUrl: \"flip-resource-list-item.css\",\n tag: \"flip-resource-list-item\",\n})\nexport class FlipResourceListItem {\n @Element() el: HTMLElement;\n\n @Prop({ mutable: true }) checked?: boolean = false;\n @Prop() description?: string;\n @Prop() disabled?: boolean;\n @Prop() hideDivider?: boolean;\n @Prop() href?: string;\n @Prop() label!: string;\n @Prop() media?: string;\n @Prop() menuTriggerId?: string;\n @Prop() menuTriggerLabel?: string = \"Options\";\n @Prop() meta?: string;\n @Prop() selectable?: boolean;\n @Prop() value?: string;\n\n @Event() valueChange: EventEmitter<boolean>;\n\n componentDidLoad() {\n this.forceAvatarProps();\n this.forceThumbnailProps();\n }\n\n private forceAvatarProps() {\n const avatarEl = this.el.querySelector(\"flip-avatar\");\n\n if (!Boolean(avatarEl)) {\n return;\n }\n\n avatarEl.removeAttribute(\"interactive\");\n avatarEl.removeAttribute(\"show-label\");\n avatarEl.removeAttribute(\"variant\");\n\n avatarEl.setAttribute(\"size\", \"l\");\n }\n\n private forceThumbnailProps() {\n const thumbnailEl = this.el.querySelector(\"flip-thumbnail\");\n\n if (!Boolean(thumbnailEl)) {\n return;\n }\n\n thumbnailEl.setAttribute(\"format\", \"landscape\");\n\n if (![\"s\", \"m\"].includes(thumbnailEl.getAttribute(\"size\"))) {\n thumbnailEl.setAttribute(\"size\", \"m\");\n }\n }\n\n private onClick = () => {\n if (!this.selectable) {\n return;\n }\n\n this.checked = !this.checked;\n this.valueChange.emit(this.checked);\n };\n\n private onMenuTriggerClick = (event: MouseEvent) => {\n if (this.disabled && !Boolean(this.href)) {\n event.stopPropagation();\n }\n };\n\n render() {\n const Tag = Boolean(this.href) && !this.selectable ? \"a\" : \"button\";\n\n const disabled = this.disabled && !Boolean(this.href);\n const hasMenu = Boolean(this.menuTriggerId);\n const showMenu = hasMenu && !Boolean(this.meta) && !this.selectable;\n const showMeta = Boolean(this.meta) && !this.selectable;\n\n const ariaChecked = this.selectable ? String(this.checked) : undefined;\n const role = this.selectable ? \"checkbox\" : undefined;\n\n const className = classnames(\"resource-list-item\", {\n \"resource-list-item--checked\": this.checked,\n \"resource-list-item--has-menu\": hasMenu,\n \"resource-list-item--hide-divider\": this.hideDivider,\n \"resource-list-item--selectable\": this.selectable,\n });\n\n return (\n <Host role=\"row\">\n <div class={className} role=\"gridcell\">\n <Tag\n aria-checked={ariaChecked}\n aria-disabled={disabled ? \"true\" : undefined}\n aria-labelledby=\"label\"\n class=\"resource-list-item__content\"\n href={this.href}\n disabled={disabled}\n onClick={this.onClick}\n role={role}\n tabIndex={0}\n >\n {Boolean(this.media) && (\n <span\n class=\"resource-list-item__media\"\n innerHTML={this.media}\n ></span>\n )}\n <span class=\"resource-list-item__label-container\">\n <span class=\"resource-list-item__label\" id=\"label\">\n {this.label}\n </span>\n {this.description && (\n <span class=\"resource-list-item__description\">\n {this.description}\n </span>\n )}\n </span>\n </Tag>\n {this.selectable && (\n <span aria-hidden=\"true\" class=\"resource-list-item__checkbox\">\n <span class=\"resource-list-item__checkbox-icon\">\n {this.checked && (\n <flip-icon-check-strong></flip-icon-check-strong>\n )}\n </span>\n </span>\n )}\n {showMeta && (\n <span class=\"resource-list-item__meta\">{this.meta}</span>\n )}\n {showMenu && (\n <flip-button\n aria-disabled={disabled ? \"true\" : undefined}\n class=\"resource-list-item__menu-trigger\"\n disabled={disabled}\n hideLabel\n icon=\"<flip-icon-more-horizontal></flip-icon-more-horizontal>\"\n id={this.menuTriggerId}\n intent=\"primary\"\n label={this.menuTriggerLabel}\n onClick={this.onMenuTriggerClick}\n ></flip-button>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/flip-resource-list.cjs.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-bd89db61.js');
+const index = require('./index-72831c5f.js');
 const flipResourceListCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}";
@@ -65,3 +65,5 @@ const FlipResourceList = class {
 FlipResourceList.style = flipResourceListCss;
 exports.flip_resource_list = FlipResourceList;
+//# sourceMappingURL=flip-resource-list.cjs.entry.js.map

package/dist/cjs/flip-resource-list.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-resource-list.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,+DAA+D;;MCO9E,gBAAgB;EAL7B;;IAUU,iBAAY,GAAG,CAAC,CAAC;IA6CjB,YAAO,GAAG;MAChB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KAC1C,CAAC;IAEM,cAAS,GAAG,CAAC,KAAoB;MACvC,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;QAC7B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;OACpE;WAAM,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;QAClC,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,MAAM,SAAS,GACb,IAAI,CAAC,YAAY,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;QAE1E,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;OAClC;WAAM,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE;QAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;OAC1B;WAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;QAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;OAC9C;KACF,CAAC;GAgBH;EAlFC,gBAAgB;IACd,IAAI,CAAC,YAAY,EAAE,CAAC;IACpB,IAAI,CAAC,uBAAuB,EAAE,CAAC;GAChC;EAEO,YAAY;IAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CACrB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CACtB,uDAAuD,CACxD,CACF,CAAC;GACH;EAEO,uBAAuB;IAC7B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI;;MACtB,OAAA,MAAA,MAAA,IAAI,CAAC,UAAU,0CACX,aAAa,CACb,wDAAwD,CACzD,0CACC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;KAAA,CACnC,CAAC;GACH;EAEO,gBAAgB,CAAC,KAAa;IACpC,IAAI,CAAC,uBAAuB,EAAE,CAAC;IAE/B,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAE/B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;MAClB,OAAO;KACR;IAED,MAAM,kBAAkB,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CACtD,wDAAwD,CACzD,CAAC;IAEF,kBAAkB,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IACjD,kBAAkB,CAAC,KAAK,EAAE,CAAC;IAE3B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;GAC3B;EA4BD,MAAM;IACJ,QACEA,QAACC,UAAI,IAAC,SAAS,EAAE,IAAI,CAAC,SAAS,IAC7BD,sCACc,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,CAAC,IAEXA,qBAAa,CACF,CACR,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/flip-resource-list/flip-resource-list.css?tag=flip-resource-list&encapsulation=shadow","./src/components/flip-resource-list/flip-resource-list.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\n@Component({\n shadow: true,\n styleUrl: \"flip-resource-list.css\",\n tag: \"flip-resource-list\",\n})\nexport class FlipResourceList {\n @Element() el: HTMLElement;\n\n @Prop() label?: string;\n\n private focusedIndex = 0;\n private items: HTMLFlipResourceListItemElement[];\n\n componentDidLoad() {\n this.collectItems();\n this.removeItemsFromTabOrder();\n }\n\n private collectItems() {\n this.items = Array.from(\n this.el.querySelectorAll(\n \"flip-resource-list-item, flip-resource-list-file-item\"\n )\n );\n }\n\n private removeItemsFromTabOrder() {\n this.items.forEach((item) =>\n item.shadowRoot\n ?.querySelector(\n \".resource-list-item__content, .resource-list-file-item\"\n )\n ?.setAttribute(\"tabIndex\", \"-1\")\n );\n }\n\n private focusItemAtIndex(index: number) {\n this.removeItemsFromTabOrder();\n\n const item = this.items[index];\n\n if (!Boolean(item)) {\n return;\n }\n\n const interactiveElement = item.shadowRoot.querySelector<HTMLElement>(\n \".resource-list-item__content, .resource-list-file-item\"\n );\n\n interactiveElement.setAttribute(\"tabIndex\", \"0\");\n interactiveElement.focus();\n\n this.focusedIndex = index;\n }\n\n private onFocus = () => {\n this.focusItemAtIndex(this.focusedIndex);\n };\n\n private onKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"ArrowDown\") {\n event.preventDefault();\n this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);\n } else if (event.key === \"ArrowUp\") {\n event.preventDefault();\n\n const prevIndex =\n this.focusedIndex === 0 ? this.items.length - 1 : this.focusedIndex - 1;\n\n this.focusItemAtIndex(prevIndex);\n } else if (event.key === \"Home\") {\n event.preventDefault();\n\n this.focusItemAtIndex(0);\n } else if (event.key === \"End\") {\n event.preventDefault();\n\n this.focusItemAtIndex(this.items.length - 1);\n }\n };\n\n render() {\n return (\n <Host onKeyDown={this.onKeyDown}>\n <flip-stack\n aria-label={this.label}\n onFocus={this.onFocus}\n role=\"grid\"\n tabIndex={0}\n >\n <slot></slot>\n </flip-stack>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/flip-search.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-bd89db61.js');
-const index$1 = require('./index-b9715722.js');
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.js');
 const flipSearchCss = ".sc-flip-search-h{display:flex;width:100%}.sc-flip-search-h *.sc-flip-search{box-sizing:border-box}.search.sc-flip-search{position:relative;display:flex;width:100%}.search--disabled.sc-flip-search .search__icon.sc-flip-search{color:var(--s-icon-disabled)}.search--disabled.sc-flip-search .search__input.sc-flip-search{color:var(--s-text-disabled)}.search--disabled.sc-flip-search .search__input.sc-flip-search::-moz-placeholder{color:var(--s-text-disabled)}.search--disabled.sc-flip-search .search__input.sc-flip-search::placeholder{color:var(--s-text-disabled)}.search__icon.sc-flip-search{position:absolute;top:50%;left:var(--s-space-12);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}.search__input.sc-flip-search{width:100%;height:2.5rem;padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));border:none;border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-raised-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.search__input.sc-flip-search:focus{outline-color:var(--s-focus-default)}.search__input.sc-flip-search::-moz-placeholder{color:var(--s-text-subdued)}.search__input.sc-flip-search::placeholder{color:var(--s-text-subdued)}.search__input.sc-flip-search::-webkit-search-decoration,.search__input.sc-flip-search::-webkit-search-cancel-button,.search__input.sc-flip-search::-webkit-search-results-button,.search__input.sc-flip-search::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.search__input.sc-flip-search:not(:-moz-placeholder-shown)+.search__clear-button.sc-flip-search{display:inline-flex}.search__input.sc-flip-search:not(:placeholder-shown)+.search__clear-button.sc-flip-search{display:inline-flex}.search__clear-button.sc-flip-search{position:absolute;top:50%;right:var(--s-space-12);display:none;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer;transform:translateY(-50%)}";
@@ -45,3 +46,5 @@ const FlipSearch = class {
 FlipSearch.style = flipSearchCss;
 exports.flip_search = FlipSearch;
+//# sourceMappingURL=flip-search.cjs.entry.js.map

package/dist/cjs/flip-search.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-search.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,ulEAAulE;;MCuBhmE,UAAU;EAZvB;;;;;IAcU,qBAAgB,GAAY,mBAAmB,CAAC;IAKhD,gBAAW,GAAY,UAAU,CAAC;IAmBlC,UAAK,GAAG;MACd,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;MACtB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;KACpB,CAAC;IAEM,WAAM,GAAG,CAAC,KAAiB;MACjC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC5B,CAAC;IAEM,aAAQ,GAAG,CAAC,KAAY;MAC9B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAE,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;KACjE,CAAC;IAEM,YAAO,GAAG,CAAC,KAAiB;MAClC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC7B,CAAC;GA2CH;EAnEC,SAAS,CAAC,KAAoB;IAC5B,IACE,CAAC,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO;OAC/C,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,EAChC;MACA,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;KACpB;GACF;EAmBD,MAAM;IACJ,MAAM,SAAS,GAAGA,kBAAU,CAAC,QAAQ,EAAE;MACrC,kBAAkB,EAAE,IAAI,CAAC,QAAQ;KAClC,CAAC,CAAC;IAEH,QACEC,QAACC,UAAI,QACHD,kBAAM,KAAK,EAAE,SAAS,IACpBA,8BAAkB,KAAK,EAAC,cAAc,GAAoB,EAC1DA,oCACiB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,gBACrC,IAAI,CAAC,KAAK,EACtB,YAAY,EAAC,KAAK,EAClB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAC,eAAe,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC9B,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,EACD,CAAC,IAAI,CAAC,QAAQ,KACbA,kCACc,IAAI,CAAC,gBAAgB,EACjC,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,IAAI,EAAC,QAAQ,IAEbA,iCAAqC,CAC9B,CACV,CACI,CACF,EACP;GACH;;;;;;","names":["classnames","h","Host"],"sources":["./src/components/flip-search/flip-search.css?tag=flip-search&encapsulation=scoped","./src/components/flip-search/flip-search.tsx"],"sourcesContent":[":host {\n display: flex;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.search {\n position: relative;\n display: flex;\n width: 100%;\n}\n\n.search--disabled {\n & .search__icon {\n color: var(--s-icon-disabled);\n }\n\n & .search__input {\n color: var(--s-text-disabled);\n\n &::placeholder {\n color: var(--s-text-disabled);\n }\n }\n}\n\n.search__icon {\n position: absolute;\n top: 50%;\n left: var(--s-space-12);\n display: inline-flex;\n color: var(--s-icon-default);\n transform: translateY(-50%);\n}\n\n.search__input {\n width: 100%;\n height: 2.5rem;\n padding-top: var(--s-space-8);\n padding-right: calc(var(--s-space-12) + 1.5rem + var(--s-space-8));\n padding-bottom: var(--s-space-8);\n padding-left: calc(var(--s-space-12) + 1.5rem + var(--s-space-8));\n border: none;\n border-radius: var(--s-border-radius-base);\n color: var(--s-text-default);\n background-color: var(--s-surface-raised-default);\n font: inherit;\n line-height: var(--s-line-height-base);\n caret-color: var(--s-border-highlight);\n\n &:focus {\n outline-color: var(--s-focus-default);\n }\n\n &::placeholder {\n color: var(--s-text-subdued);\n }\n\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n appearance: none;\n }\n\n &:not(:placeholder-shown) {\n & + .search__clear-button {\n display: inline-flex;\n }\n }\n}\n\n.search__clear-button {\n position: absolute;\n top: 50%;\n right: var(--s-space-12);\n display: none;\n padding: 0;\n border: none;\n color: var(--s-icon-default);\n background-color: transparent;\n cursor: pointer;\n transform: translateY(-50%);\n}\n","import {\n Component,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\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-search.css\",\n tag: \"flip-search\",\n})\nexport class FlipSearch {\n @Prop() autoFocus?: boolean;\n @Prop() clearButtonLabel?: string = \"Clear search term\";\n @Prop() disabled?: boolean;\n @Prop() inputName?: string;\n @Prop() inputId?: string;\n @Prop() label?: string;\n @Prop() placeholder?: string = \"Search …\";\n @Prop({ mutable: true }) value?: string;\n\n @Event() inputBlur: EventEmitter<FocusEvent>;\n @Event() inputFocus: EventEmitter<FocusEvent>;\n @Event() valueChange: EventEmitter<string>;\n\n private input: HTMLInputElement;\n\n @Listen(\"keydown\", { target: \"window\" })\n onKeyDown(event: KeyboardEvent) {\n if (\n (event.code === \"KeyK\" || event.code === \"Slash\") &&\n (event.ctrlKey || event.metaKey)\n ) {\n this.input.focus();\n }\n }\n\n private clear = () => {\n this.input.value = \"\";\n this.input.focus();\n };\n\n private onBlur = (event: FocusEvent) => {\n this.inputBlur.emit(event);\n };\n\n private onChange = (event: Event) => {\n this.valueChange.emit((event.target as HTMLInputElement).value);\n };\n\n private onFocus = (event: FocusEvent) => {\n this.inputFocus.emit(event);\n };\n\n render() {\n const className = classnames(\"search\", {\n \"search--disabled\": this.disabled,\n });\n\n return (\n <Host>\n <span class={className}>\n <flip-icon-search class=\"search__icon\"></flip-icon-search>\n <input\n aria-disabled={this.disabled ? \"true\" : undefined}\n aria-label={this.label}\n autoComplete=\"off\"\n autoFocus={this.autoFocus}\n class=\"search__input\"\n disabled={this.disabled}\n id={this.inputId}\n inputMode=\"search\"\n name={this.inputName}\n onBlur={this.onBlur}\n onChange={this.onChange}\n onFocus={this.onFocus}\n placeholder={this.placeholder}\n ref={(el) => (this.input = el)}\n type=\"search\"\n value={this.value}\n />\n {!this.disabled && (\n <button\n aria-label={this.clearButtonLabel}\n class=\"search__clear-button\"\n onClick={this.clear}\n type=\"button\"\n >\n <flip-icon-cancel></flip-icon-cancel>\n </button>\n )}\n </span>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/flip-stack.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-bd89db61.js');
-const index$1 = require('./index-b9715722.js');
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.js');
 const flipStackCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.stack{display:flex;width:100%;max-width:100%}.stack ::slotted(*){min-width:0;max-width:100%;flex-basis:auto;flex-grow:0;flex-shrink:0}.stack--align-start{align-items:flex-start}.stack--align-center{align-items:center}.stack--align-end{align-items:flex-end}.stack--align-stretch{align-items:stretch}.stack--justify-start{justify-content:flex-start}.stack--justify-center{justify-content:center}.stack--justify-end{justify-content:flex-end}.stack--justify-space-between{justify-content:space-between}.stack--justify-space-around{justify-content:space-around}.stack--justify-space-evenly{justify-content:space-evenly}.stack--justify-stretch{justify-content:stretch}.stack--justify-stretch ::slotted(*){flex-grow:1}.stack--orientation-vertical{flex-direction:column}.stack--orientation-horizontal{flex-direction:row}.stack--wrap{flex-wrap:wrap}";
@@ -26,3 +27,5 @@ const FlipStack = class {
 FlipStack.style = flipStackCss;
 exports.flip_stack = FlipStack;
+//# sourceMappingURL=flip-stack.cjs.entry.js.map

package/dist/cjs/flip-stack.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-stack.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,YAAY,GAAG,w4BAAw4B;;MC+Bh5B,SAAS;EALtB;;IAMU,UAAK,GAAoB,OAAO,CAAC;IACjC,OAAE,GAAY,KAAK,CAAC;IACpB,YAAO,GAAsB,OAAO,CAAC;IACrC,gBAAW,GAA0B,UAAU,CAAC;IAChD,YAAO,GAAsB,GAAG,CAAC;IACjC,SAAI,GAAa,KAAK,CAAC;GAwBhC;EAtBC,MAAM;IACJ,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC;IAEpB,MAAM,SAAS,GAAGA,kBAAU,CAC1B,OAAO,EACP,gBAAgB,IAAI,CAAC,KAAK,EAAE,EAC5B,kBAAkB,IAAI,CAAC,OAAO,EAAE,EAChC,sBAAsB,IAAI,CAAC,WAAW,EAAE,EACxC,EAAE,aAAa,EAAE,IAAI,CAAC,IAAI,EAAE,CAC7B,CAAC;IAEF,QACEC,QAACC,UAAI,QACHD,QAAC,GAAG,IACF,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,EAAE,GAAG,EAAE,iBAAiB,IAAI,CAAC,OAAO,GAAG,EAAE,IAEhDA,qBAAa,CACT,CACD,EACP;GACH;;;;;;","names":["classnames","h","Host"],"sources":["./src/components/flip-stack/flip-stack.css?tag=flip-stack&encapsulation=shadow","./src/components/flip-stack/flip-stack.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.stack {\n display: flex;\n width: 100%;\n max-width: 100%;\n\n & ::slotted(*) {\n min-width: 0;\n max-width: 100%;\n flex-basis: auto;\n flex-grow: 0;\n flex-shrink: 0;\n }\n}\n\n.stack--align-start {\n align-items: flex-start;\n}\n\n.stack--align-center {\n align-items: center;\n}\n\n.stack--align-end {\n align-items: flex-end;\n}\n\n.stack--align-stretch {\n align-items: stretch;\n}\n\n.stack--justify-start {\n justify-content: flex-start;\n}\n\n.stack--justify-center {\n justify-content: center;\n}\n\n.stack--justify-end {\n justify-content: flex-end;\n}\n\n.stack--justify-space-between {\n justify-content: space-between;\n}\n\n.stack--justify-space-around {\n justify-content: space-around;\n}\n\n.stack--justify-space-evenly {\n justify-content: space-evenly;\n}\n\n.stack--justify-stretch {\n justify-content: stretch;\n\n & ::slotted(*) {\n flex-grow: 1;\n }\n}\n\n.stack--orientation-vertical {\n flex-direction: column;\n}\n\n.stack--orientation-horizontal {\n flex-direction: row;\n}\n\n.stack--wrap {\n flex-wrap: wrap;\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipStackAlign = \"start\" | \"center\" | \"end\" | \"stretch\";\n\nexport type FlipStackJustify =\n | \"start\"\n | \"center\"\n | \"end\"\n | \"space-between\"\n | \"space-around\"\n | \"space-evenly\"\n | \"stretch\";\n\nexport type FlipStackOrientation = \"horizontal\" | \"vertical\";\n\nexport type FlipStackSpacing =\n | \"0\"\n | \"2\"\n | \"4\"\n | \"8\"\n | \"12\"\n | \"16\"\n | \"24\"\n | \"32\";\n\n@Component({\n shadow: true,\n styleUrl: \"flip-stack.css\",\n tag: \"flip-stack\",\n})\nexport class FlipStack {\n @Prop() align?: FlipStackAlign = \"start\";\n @Prop() as?: string = \"div\";\n @Prop() justify?: FlipStackJustify = \"start\";\n @Prop() orientation?: FlipStackOrientation = \"vertical\";\n @Prop() spacing?: FlipStackSpacing = \"0\";\n @Prop() wrap?: boolean = false;\n\n render() {\n const Tag = this.as;\n\n const className = classnames(\n \"stack\",\n `stack--align-${this.align}`,\n `stack--justify-${this.justify}`,\n `stack--orientation-${this.orientation}`,\n { \"stack--wrap\": this.wrap }\n );\n\n return (\n <Host>\n <Tag\n class={className}\n style={{ gap: `var(--s-space-${this.spacing})` }}\n >\n <slot></slot>\n </Tag>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/flip-switch.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-bd89db61.js');
-const index$1 = require('./index-b9715722.js');
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.js');
 const flipSwitchCss = ".sc-flip-switch-h{display:inline-flex}.sc-flip-switch-h *.sc-flip-switch{box-sizing:border-box}.switch.sc-flip-switch{display:inline-flex;align-items:center;touch-action:none}.switch.sc-flip-switch:focus-within .switch__control.sc-flip-switch{box-shadow:0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default)}.switch--size-m.sc-flip-switch .switch__control.sc-flip-switch{width:2.75rem;height:1.5rem;border-radius:calc(1.5rem / 2)}.switch--size-m.sc-flip-switch .switch__thumb.sc-flip-switch{width:1.25rem;height:1.25rem}.switch--on.switch--size-m.sc-flip-switch .switch__thumb.sc-flip-switch{left:calc(100% - 1.25rem - var(--s-space-2))}.switch--on.sc-flip-switch .switch__control.sc-flip-switch{background-color:var(--s-interactive-primary-default)}.switch--on.sc-flip-switch .switch__thumb.sc-flip-switch{left:calc(100% - 0.875rem - var(--s-space-2))}.switch--disabled.sc-flip-switch .switch__control.sc-flip-switch{background-color:var(--s-interactive-primary-disabled);cursor:default}.switch--disabled.sc-flip-switch .switch__thumb.sc-flip-switch{background-color:var(--s-interactive-neutral-default)}.switch--disabled.sc-flip-switch .switch__label.sc-flip-switch{color:var(--s-text-disabled)}.switch__control.sc-flip-switch{position:relative;width:1.875rem;height:1.125rem;flex-shrink:0;border-radius:calc(1.125rem / 2);background-color:var(--s-interactive-primary-disabled);cursor:pointer;transition:background-color 0.2s}@media (prefers-reduced-motion){.switch__control.sc-flip-switch{transition:none}}.switch__thumb.sc-flip-switch{position:absolute;top:var(--s-space-2);left:var(--s-space-2);width:0.875rem;height:0.875rem;border-radius:50%;background-color:var(--s-surface-default);transition:left 0.2s;pointer-events:none}@media (prefers-reduced-motion){.switch__thumb.sc-flip-switch{transition:none}}.switch__label.sc-flip-switch{position:relative;z-index:1;margin-left:var(--s-space-12);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base)}";
@@ -90,3 +91,5 @@ const FlipSwitch = class {
 FlipSwitch.style = flipSwitchCss;
 exports.flip_switch = FlipSwitch;
+//# sourceMappingURL=flip-switch.cjs.entry.js.map

package/dist/cjs/flip-switch.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-switch.entry.cjs.js","mappings":"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","names":["classnames","h","Host"],"sources":["./src/components/flip-switch/flip-switch.css?tag=flip-switch&encapsulation=scoped","./src/components/flip-switch/flip-switch.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.switch {\n display: inline-flex;\n align-items: center;\n touch-action: none;\n\n &:focus-within .switch__control {\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.switch--size-m {\n & .switch__control {\n width: 2.75rem;\n height: 1.5rem;\n border-radius: calc(1.5rem / 2);\n }\n\n & .switch__thumb {\n width: 1.25rem;\n height: 1.25rem;\n }\n}\n\n.switch--on {\n &.switch--size-m {\n & .switch__thumb {\n left: calc(100% - 1.25rem - var(--s-space-2));\n }\n }\n\n & .switch__control {\n background-color: var(--s-interactive-primary-default);\n }\n\n & .switch__thumb {\n left: calc(100% - 0.875rem - var(--s-space-2));\n }\n}\n\n.switch--disabled {\n & .switch__control {\n background-color: var(--s-interactive-primary-disabled);\n cursor: default;\n }\n\n & .switch__thumb {\n background-color: var(--s-interactive-neutral-default);\n }\n\n & .switch__label {\n color: var(--s-text-disabled);\n }\n}\n\n.switch__control {\n position: relative;\n width: 1.875rem;\n height: 1.125rem;\n flex-shrink: 0;\n border-radius: calc(1.125rem / 2);\n background-color: var(--s-interactive-primary-disabled);\n cursor: pointer;\n transition: background-color 0.2s;\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n}\n\n.switch__thumb {\n position: absolute;\n top: var(--s-space-2);\n left: var(--s-space-2);\n width: 0.875rem;\n height: 0.875rem;\n border-radius: 50%;\n background-color: var(--s-surface-default);\n transition: left 0.2s;\n pointer-events: none;\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n}\n\n.switch__label {\n position: relative;\n z-index: 1;\n margin-left: var(--s-space-12);\n font-size: var(--s-font-size-sm);\n font-weight: var(--s-font-weight-medium);\n line-height: var(--s-line-height-base);\n}\n","import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipSwitchSize = \"s\" | \"m\";\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-switch.css\",\n tag: \"flip-switch\",\n})\nexport class FlipSwitch {\n @Element() el: HTMLElement;\n\n @Prop({ mutable: true }) checked?: boolean = false;\n @Prop() disabled?: boolean = false;\n @Prop() inputId!: string;\n @Prop() inputName!: string;\n @Prop() label?: string;\n @Prop() size?: FlipSwitchSize = \"m\";\n @Prop() value?: string;\n\n @Event() valueChange: EventEmitter<boolean>;\n\n private control: HTMLElement;\n private dragging = false;\n private recentlyDragged = false;\n private thumb: HTMLElement;\n\n @Listen(\"pointerup\", { target: \"window\" })\n onWindowPointerUp() {\n this.onEndDrag();\n }\n\n private onChange = () => {\n if (this.dragging) {\n return;\n }\n\n if (this.recentlyDragged) {\n this.recentlyDragged = false;\n return;\n }\n\n this.checked = !this.checked;\n this.valueChange.emit(this.checked);\n };\n\n private onStartDrag = () => {\n if (this.disabled) {\n return;\n }\n\n this.dragging = true;\n this.thumb.style.transition = \"none\";\n };\n\n private onEndDrag = () => {\n if (this.disabled) {\n return;\n }\n\n if (this.recentlyDragged) {\n const controlBonds = this.control.getBoundingClientRect();\n const thumbBounds = this.thumb.getBoundingClientRect();\n\n const on =\n this.thumb.offsetLeft + thumbBounds.width / 2 > controlBonds.width / 2;\n\n if (this.checked !== on) {\n this.checked = on;\n this.valueChange.emit(on);\n }\n }\n\n this.thumb.style.left = \"\";\n this.thumb.style.transition = \"\";\n\n this.dragging = false;\n\n setTimeout(() => {\n this.recentlyDragged = false;\n });\n };\n\n private onDrag = (event: PointerEvent) => {\n if (!this.dragging) {\n return;\n }\n\n this.recentlyDragged = true;\n\n const controlBonds = this.control.getBoundingClientRect();\n const thumbBounds = this.thumb.getBoundingClientRect();\n\n let pos = Math.round(event.offsetX - thumbBounds.width / 2);\n\n if (pos < 0) {\n pos = 0;\n }\n\n if (pos > Math.round(controlBonds.width - thumbBounds.width)) {\n pos = Math.round(controlBonds.width - thumbBounds.width);\n }\n\n this.thumb.style.left = `${pos}px`;\n };\n\n render() {\n const off = !this.checked;\n const on = this.checked;\n\n const ariaCheckedLabel = on ? \"true\" : \"false\";\n\n const className = classnames(\"switch\", `switch--size-${this.size}`, {\n \"switch--off\": off,\n \"switch--on\": on,\n \"switch--disabled\": this.disabled,\n });\n\n return (\n <Host>\n <label class={className} htmlFor={this.inputId}>\n <span\n class=\"switch__control\"\n onPointerDown={this.onStartDrag}\n onPointerMove={this.onDrag}\n onPointerUp={this.onEndDrag}\n ref={(el) => (this.control = el)}\n >\n <flip-visually-hidden>\n <input\n aria-checked={ariaCheckedLabel}\n checked={on}\n class=\"switch__input\"\n disabled={this.disabled}\n id={this.inputId}\n name={this.inputName}\n onChange={this.onChange}\n role=\"switch\"\n type=\"checkbox\"\n value={this.value}\n />\n </flip-visually-hidden>\n <span\n aria-hidden=\"true\"\n class=\"switch__thumb\"\n ref={(el) => (this.thumb = el)}\n ></span>\n </span>\n {this.label && <span class=\"switch__label\">{this.label}</span>}\n </label>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/flip-tab.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-bd89db61.js');
-const index$1 = require('./index-b9715722.js');
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.js');
 const flipTabCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.tab{display:none;width:100%;padding:var(--s-space-8)}.tab--active{display:block}";
@@ -19,3 +20,5 @@ const FlipTab = class {
 FlipTab.style = flipTabCss;
 exports.flip_tab = FlipTab;
+//# sourceMappingURL=flip-tab.cjs.entry.js.map

package/dist/cjs/flip-tab.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-tab.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,UAAU,GAAG,gJAAgJ;;MCQtJ,OAAO;;;;EAKlB,MAAM;IACJ,MAAM,SAAS,GAAGA,kBAAU,CAAC,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAEpE,QACEC,QAACC,UAAI,uBACc,OAAO,IAAI,CAAC,KAAK,EAAE,EACpC,EAAE,EAAE,IAAI,CAAC,KAAK,EACd,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,IAE9BD,iBAAK,KAAK,EAAE,SAAS,IACnBA,qBAAa,CACT,CACD,EACP;GACH;;;;;;","names":["classnames","h","Host"],"sources":["./src/components/flip-tab/flip-tab.css?tag=flip-tab&encapsulation=shadow","./src/components/flip-tab/flip-tab.tsx"],"sourcesContent":[":host {\n display: block;\n width: 100%;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.tab {\n display: none;\n width: 100%;\n padding: var(--s-space-8);\n}\n\n.tab--active {\n display: block;\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n@Component({\n shadow: true,\n styleUrl: \"flip-tab.css\",\n tag: \"flip-tab\",\n})\nexport class FlipTab {\n @Prop() active?: boolean;\n @Prop() label!: string;\n @Prop() tabId!: string;\n\n render() {\n const className = classnames(\"tab\", { \"tab--active\": this.active });\n\n return (\n <Host\n aria-labelledby={`tab-${this.tabId}`}\n id={this.tabId}\n role=\"tabpanel\"\n tabIndex={this.active ? 0 : -1}\n >\n <div class={className}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/flip-tabs.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-bd89db61.js');
-const index$1 = require('./index-b9715722.js');
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.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}}";
@@ -122,3 +123,5 @@ const FlipTabs = class {
 FlipTabs.style = flipTabsCss;
 exports.flip_tabs = FlipTabs;
+//# sourceMappingURL=flip-tabs.cjs.entry.js.map

package/dist/cjs/flip-tabs.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-tabs.entry.cjs.js","mappings":"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","names":["h","Host","classnames"],"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}

package/dist/cjs/flip-tag.cjs.entry.js CHANGED Viewed

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-bd89db61.js');
-const index$1 = require('./index-b9715722.js');
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.js');
 const flipTagCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.tag{display:inline-flex;padding:var(--s-space-2) var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--s-surface-neutral-subdued);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--icon-info)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--icon-critical)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--icon-warning)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--icon-success)}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer}.tag__removal-button:focus{outline-color:var(--s-focus-default)}";
@@ -26,3 +27,5 @@ const FlipTag = class {
 FlipTag.style = flipTagCss;
 exports.flip_tag = FlipTag;
+//# sourceMappingURL=flip-tag.cjs.entry.js.map

package/dist/cjs/flip-tag.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-tag.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,UAAU,GAAG,uwCAAuwC;;MCe7wC,OAAO;EALpB;;;IAMU,WAAM,GAAmB,SAAS,CAAC;IAGnC,uBAAkB,GAAY,QAAQ,CAAC;IAIvC,aAAQ,GAAG,CAAC,KAAiB;;MACnC,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,CAAC,KAAK,CAAC,CAAC;KAC1B,CAAC;GAuBH;EArBC,MAAM;IACJ,MAAM,SAAS,GAAGA,kBAAU,CAAC,KAAK,EAAE,eAAe,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAElE,QACEC,QAACC,UAAI,QACHD,kBAAM,KAAK,EAAE,SAAS,IACnB,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,SAAS,KACbA,kCACc,IAAI,CAAC,kBAAkB,EACnC,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,IAAI,EAAC,QAAQ,IAEbA,6BAAiB,IAAI,EAAE,EAAE,GAAoB,CACtC,CACV,CACI,CACF,EACP;GACH;;;;;;","names":["classnames","h","Host"],"sources":["./src/components/flip-tag/flip-tag.css?tag=flip-tag&encapsulation=shadow","./src/components/flip-tag/flip-tag.tsx"],"sourcesContent":[":host {\n display: inline-flex;\n\n & * {\n box-sizing: border-box;\n }\n}\n\n.tag {\n display: inline-flex;\n padding: var(--s-space-2) var(--s-space-8);\n align-items: center;\n border-radius: var(--s-border-radius-s);\n color: var(--s-text-default);\n background-color: var(--s-surface-neutral-subdued);\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 gap: var(--s-space-4);\n}\n\n.tag--intent-info {\n color: var(--s-text-info);\n background-color: var(--s-surface-info-subdued);\n\n & .tag__removal-button {\n color: var(--icon-info);\n }\n}\n\n.tag--intent-critical {\n color: var(--s-text-critical);\n background-color: var(--s-surface-critical-subdued);\n\n & .tag__removal-button {\n color: var(--icon-critical);\n }\n}\n\n.tag--intent-warning {\n color: var(--s-text-warning);\n background-color: var(--s-surface-warning-subdued);\n\n & .tag__removal-button {\n color: var(--icon-warning);\n }\n}\n\n.tag--intent-success {\n color: var(--s-text-success);\n background-color: var(--s-surface-success-subdued);\n\n & .tag__removal-button {\n color: var(--icon-success);\n }\n}\n\n.tag__removal-button {\n display: inline-flex;\n margin-right: calc(-1 * var(--s-space-4));\n padding: 0;\n border: none;\n color: var(--s-icon-strong);\n background-color: transparent;\n cursor: pointer;\n\n &:focus {\n outline-color: var(--s-focus-default);\n }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipTagIntent =\n | \"default\"\n | \"critical\"\n | \"warning\"\n | \"success\"\n | \"info\";\n\n@Component({\n shadow: true,\n styleUrl: \"flip-tag.css\",\n tag: \"flip-tag\",\n})\nexport class FlipTag {\n @Prop() intent?: FlipTagIntent = \"default\";\n @Prop() label!: string;\n @Prop() removable?: boolean;\n @Prop() removalButtonLabel?: string = \"Remove\";\n\n @Event() remove?: EventEmitter<MouseEvent>;\n\n private onRemove = (event: MouseEvent) => {\n this.remove?.emit(event);\n };\n\n render() {\n const className = classnames(\"tag\", `tag--intent-${this.intent}`);\n\n return (\n <Host>\n <span class={className}>\n {this.label}\n {this.removable && (\n <button\n aria-label={this.removalButtonLabel}\n class=\"tag__removal-button\"\n onClick={this.onRemove}\n type=\"button\"\n >\n <flip-icon-close size={16}></flip-icon-close>\n </button>\n )}\n </span>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/cjs/flip-text-input.cjs.entry.js ADDED Viewed

@@ -0,0 +1,131 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+const index = require('./index-72831c5f.js');
+const index$1 = require('./index-b8470262.js');
+require('./_commonjsHelpers-a5111d61.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 FlipTextInput = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.valueChange = index.createEvent(this, "valueChange", 7);
+    this.autoComplete = "on";
+    this.clearButtonLabel = "Clear input";
+    this.rows = 1;
+    this.passwordToggleLabel = "Toggle password display";
+    this.type = "text";
+    this.showPassword = false;
+    this.clear = () => {
+      this.inputEl.value = "";
+      this.value = "";
+      this.valueChange.emit("");
+      this.inputEl.focus();
+    };
+    this.onChange = (event) => {
+      const el = event.target;
+      this.value = el.value;
+      this.valueChange.emit(el.value);
+    };
+    this.onFocus = (event) => {
+      this.handleAutoSelect(event);
+    };
+    this.onInput = (event) => {
+      this.onChange(event);
+    };
+    this.onKeyPress = (event) => {
+      if (this.type !== "number") {
+        return;
+      }
+      if (["+", "-", "e"].includes(event.key)) {
+        event.preventDefault();
+      }
+    };
+    this.decreaseValue = () => {
+      if (this.type !== "number") {
+        return;
+      }
+      const step = this.step || 1;
+      const currentValue = isNaN(this.inputEl.valueAsNumber)
+        ? this.min !== undefined
+          ? this.min + 1
+          : 1
+        : this.inputEl.valueAsNumber;
+      this.value = String(Math.max(this.min || -Infinity, currentValue - step));
+      this.valueChange.emit(this.value);
+    };
+    this.increaseValue = () => {
+      if (this.type !== "number") {
+        return;
+      }
+      const step = this.step || 1;
+      const currentValue = isNaN(this.inputEl.valueAsNumber)
+        ? this.min !== undefined
+          ? this.min - 1
+          : -1
+        : this.inputEl.valueAsNumber;
+      this.value = String(Math.min(this.max || Infinity, currentValue + step));
+      this.valueChange.emit(this.value);
+    };
+    this.togglePassword = () => {
+      if (this.type !== "password") {
+        return;
+      }
+      this.showPassword = !this.showPassword;
+    };
+  }
+  componentDidRender() {
+    this.adjustInputSize();
+  }
+  adjustInputSize() {
+    if (this.rows > 1) {
+      this.inputEl.style.width = "";
+      this.inputEl.style.height = "";
+      this.inputEl.style.height = this.inputEl.scrollHeight / 16 + "rem";
+    }
+    if (this.rows === 1) {
+      this.inputEl.style.height = "";
+      this.inputEl.style.width = "";
+      if (this.type !== "password") {
+        this.inputEl.style.width = this.inputEl.scrollWidth / 16 + "rem";
+      }
+    }
+  }
+  handleAutoSelect(event) {
+    if (!this.autoSelect) {
+      return;
+    }
+    event.target.select();
+  }
+  render() {
+    var _a;
+    const Tag = this.rows === 1 ? "input" : "textarea";
+    const ariaInvalid = this.invalid === true
+      ? "true"
+      : this.invalid === false
+        ? "false"
+        : undefined;
+    const showStepper = this.type === "number" && !this.disabled;
+    const showPasswordToggle = this.type === "password" && !this.disabled;
+    const showClearButton = this.clearable &&
+      !this.disabled &&
+      Boolean(this.value) &&
+      !showPasswordToggle &&
+      !showStepper &&
+      !this.showCharacterCounter;
+    const type = this.type === "password" && this.showPassword ? "text" : this.type;
+    const className = index$1.classnames("text-input", `text-input--type-${this.type}`, {
+      "text-input--clearable": this.clearable,
+      "text-input--disabled": this.disabled,
+      "text-input--show-password": this.type === "password" && this.showPassword,
+    });
+    return (index.h(index.Host, null, index.h("div", { class: className }, this.prefixLabel && (index.h("span", { class: "text-input__prefix" }, this.prefixLabel)), index.h(Tag, { "aria-describedby": this.flipAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, ref: (el) => (this.inputEl = el), required: this.required, rows: this.rows > 1 ? this.rows : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.rows === 1 ? this.value : undefined }, this.rows > 1 && this.value), this.suffixLabel && (index.h("span", { class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (index.h("button", { "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, type: "button" }, index.h("flip-icon-cancel", null))), showPasswordToggle && (index.h("button", { "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (index.h("flip-icon-visibility-off", null)) : (index.h("flip-icon-visibility", null)))), showStepper && (index.h("span", { class: "text-input__stepper" }, index.h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, index.h("flip-icon-expand-less", null)), index.h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, index.h("flip-icon-expand-more", null)))), this.showCharacterCounter && (index.h("span", { class: "text-input__character-counter" }, ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
+  }
+};
+FlipTextInput.style = flipTextInputCss;
+exports.flip_text_input = FlipTextInput;
+//# sourceMappingURL=flip-text-input.cjs.entry.js.map

package/dist/cjs/flip-text-input.cjs.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"flip-text-input.entry.cjs.js","mappings":"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","names":["classnames","h","Host"],"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}