@square/maker/components/ActionBar/styles.css.map

Maker Design System by Square

{"version":3,"file":"styles.css","mappings":"AA8EA,gBACA,0JAMA,CCzCA,gBACA,4GAKA,CAIA,sBAFA,aACA,8BAEA,uDACA,mBACA,CAEA,oCACA,gBACA,YACA,CACA,CAEA,oCACA,gBACA,YACA,CACA,CAEA,qCACA,gBACA,YACA,CACA,CAEA,gBACA,UACA,CAEA,gBACA,kBAEA,WADA,SAEA,CAEA,gBACA,iBAKA,CAEA,gCALA,SACA,OAFA,QAGA,SASA,CANA,gBACA,cAKA,CAEA,gBAGA,+CAFA,iBAGA,oBAFA,uBAOA,CAHA,2BACA,cACA,CCpBA,gBACA,6BACA,sBACA,4GAKA,CAEA,2GAUA,CAHA,+BACA,gBACA,CAGA,oCACA,gBACA,gBACA,CACA,CCkHA,gBACA,qBACA,wBACA,sBACA,0BACA,4BACA,0BA0BA,kBAtBA,mBASA,mCACA,YACA,0DAEA,4DAEA,CAXA,wBAYA,eAjBA,oBAQA,wDADA,kCADA,oDAHA,4BADA,YAWA,aATA,gCALA,kBAuBA,0BAJA,yDAEA,CACA,0CAZA,qBA8FA,CA9EA,kBACA,qCACA,CAEA,+BAGA,mBAFA,oBACA,cAGA,4BACA,UAFA,0BAGA,CA7CA,gBA+CA,uCAiEA,CA/DA,iCACA,aACA,CAEA,+BACA,UACA,CAEA,+BACA,sBACA,CAEA,+BACA,sBACA,6BAEA,mBADA,eAEA,CAEA,+BACA,2BACA,6BACA,CAEA,+BACA,eACA,CAEA,+BACA,0CACA,CAEA,+BACA,uCACA,CAEA,yBACA,WAKA,CAHA,2BACA,UACA,CAGA,sBACA,2FAGA,CAEA,uBACA,sDACA,CAEA,qBACA,sBACA,qDACA,CACA,CAEA,+BACA,WACA,CAGA,gBAOA,mBAGA,yBACA,mBAPA,WAKA,wBAHA,aAEA,uBAHA,SAJA,kBAEA,UADA,OAUA,CAEA,gBACA,aACA,2CACA,CAEA,gCACA,YACA,CAEA,gBAEA,WADA,2CAEA,CAEA,gCACA,2CACA,CAEA,gBACA,gBAKA,CAHA,gCACA,eACA,CAGA,gBAGA,qBACA,4BAFA,oBAKA,gBADA,gBAEA,uBAHA,2CAIA,CAEA,gCACA,oBACA,CAEA,+CACA,eACA,CAEA,+CACA,gBACA,CChWA,gBACA,sBACA,oIAMA,CAEA,sDACA","sources":["webpack://@square/maker/./src/components/ActionBar/src/TransitionActionBarItems.vue","webpack://@square/maker/./src/components/ActionBar/src/AtomicActionBar.vue","webpack://@square/maker/./src/components/ActionBar/src/ActionBarLayer.vue","webpack://@square/maker/./src/components/ActionBar/src/ActionBarButton.vue","webpack://@square/maker/./src/components/ActionBar/src/InlineActionBar.vue"],"sourcesContent":["<template>\n\t<transition-group\n\t\tv-bind=\"$attrs\"\n\n\t\t:enter-active-class=\"$s.transitioning\"\n\t\t:leave-active-class=\"$s.transitioning\"\n\n\t\t@before-enter=\"zeroWidth\"\n\t\t@enter=\"setContentWidth($event, 'enter')\"\n\t\t@after-enter=\"removeWidth\"\n\n\t\t@before-leave=\"setContentWidth($event, 'leave')\"\n\t\t@leave=\"onLeave\"\n\t\t@after-leave=\"removeWidth\"\n\t>\n\t\t<slot />\n\t</transition-group>\n</template>\n\n<script>\n/* eslint-disable unicorn/no-null */\n\nfunction getElementRealWidth(element) {\n\tconst elc = element.cloneNode(true);\n\telc.removeAttribute('style');\n\tObject.assign(elc.style, {\n\t\tposition: 'absolute',\n\t\tvisibility: 'hidden',\n\t});\n\telement.parentNode.insertBefore(elc, element);\n\tconst realWidth = elc.offsetWidth;\n\telc.remove();\n\treturn realWidth;\n}\n\nexport default {\n\tinheritAttrs: false,\n\n\tmethods: {\n\t\tzeroWidth(element) {\n\t\t\tObject.assign(element.style, {\n\t\t\t\twidth: '0px',\n\t\t\t\tpaddingRight: '0px',\n\t\t\t\tpaddingLeft: '0px',\n\t\t\t\tmarginRight: '0px',\n\t\t\t\topacity: 0,\n\t\t\t});\n\t\t},\n\n\t\tremoveWidth(element) {\n\t\t\telement.style.width = null;\n\t\t},\n\n\t\tsetContentWidth(element, direction) {\n\t\t\tlet newWidth = element.scrollWidth;\n\n\t\t\tif (direction === 'enter') {\n\t\t\t\tnewWidth = getElementRealWidth(element);\n\t\t\t}\n\n\t\t\tObject.assign(element.style, {\n\t\t\t\twidth: `${newWidth}px`,\n\t\t\t\tpaddingRight: null,\n\t\t\t\tpaddingLeft: null,\n\t\t\t\tmarginRight: null,\n\t\t\t\topacity: null,\n\t\t\t});\n\t\t},\n\n\t\tonLeave(element) {\n\t\t\tthis.setContentWidth(element);\n\t\t\tthis.zeroWidth(element);\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.transitioning {\n\ttransition:\n\t\topacity 0.1s ease-in-out,\n\t\twidth 0.1s ease-in-out,\n\t\tmargin-right 0.1s ease-in-out,\n\t\tpadding-right 0.1s ease-in-out,\n\t\tpadding-left 0.1s ease-in-out !important;\n}\n</style>\n","<template>\n\t<transition-action-bar-items\n\t\t:class=\"[\n\t\t\t$s.ActionBar,\n\t\t\t$s[`position_${position}`],\n\t\t\t$s[`hide-on_${hideOn}`],\n\t\t]\"\n\t\ttag=\"div\"\n\t>\n\t\t<vnode-syringe :class&=\"$s.Action\">\n\t\t\t<!-- @slot ActionBar items -->\n\t\t\t<slot />\n\t\t</vnode-syringe>\n\t</transition-action-bar-items>\n</template>\n\n<script>\nimport vnodeSyringe from 'vue-vnode-syringe';\nimport TransitionActionBarItems from './TransitionActionBarItems.vue';\n\nexport default {\n\tcomponents: {\n\t\tvnodeSyringe,\n\t\tTransitionActionBarItems,\n\t},\n\n\tprops: {\n\t\tposition: {\n\t\t\ttype: String,\n\t\t\tdefault: 'absolute',\n\t\t\tvalidator: (position) => ['static', 'relative', 'absolute', 'fixed'].includes(position),\n\t\t},\n\t\thideOn: {\n\t\t\ttype: String,\n\t\t\tdefault: 'none',\n\t\t\tvalidator: (hideOn) => ['none', 'mobile', 'tablet', 'desktop'].includes(hideOn),\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n/* tempfix: chrome-bottom-offset - value set outside of maker */\n/* stylelint-disable length-zero-no-unit */\n.ActionBar {\n\t--actionbar-bottom-padding:\n\t\tcalc(\n\t\t\t24px\n\t\t\t+ env(safe-area-inset-bottom, 24px)\n\t\t\t+ var(--chrome-bottom-offset, 0px)\n\t\t);\n\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tbox-sizing: border-box;\n\tpadding: 24px 24px var(--actionbar-bottom-padding) 24px;\n\tpointer-events: none;\n}\n\n@media screen and (--for-tablet-landscape-down) {\n\t.hide-on_mobile {\n\t\tdisplay: none;\n\t}\n}\n\n@media screen and (--for-tablet-landscape-up) {\n\t.hide-on_tablet {\n\t\tdisplay: none;\n\t}\n}\n\n@media screen and (--for-desktop-up) {\n\t.hide-on_desktop {\n\t\tdisplay: none;\n\t}\n}\n\n.position_static {\n\twidth: 100%;\n}\n\n.position_relative {\n\tposition: relative;\n\tz-index: 1;\n\twidth: 100%;\n}\n\n.position_absolute {\n\tposition: absolute;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tz-index: 1;\n}\n\n.position_fixed {\n\tposition: fixed;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tz-index: 1;\n}\n\n.Action {\n\tmargin-right: 8px;\n\ttransform: translate3d(0, 0, 0);  /* Fixes buttons flickering on mobile devices */\n\tfilter: drop-shadow(0 15px 10px rgb(0 0 0 / 20%));\n\tpointer-events: auto;\n\n\t&:last-child {\n\t\tmargin-right: 0;\n\t}\n}\n</style>\n","<template>\n\t<div\n\t\t:class=\"[\n\t\t\t$s.ActionBarLayer,\n\t\t\t{ [$s.NoActionBar]: !hasActionBar },\n\t\t]\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t>\n\t\t<!-- @slot content actionbar will be opened over -->\n\t\t<slot />\n\n\t\t<m-transition\n\t\t\t:enter=\"springUpBounceFn\"\n\t\t\t:leave=\"springDownBounceFn\"\n\t\t>\n\t\t\t<atomic-action-bar\n\t\t\t\tv-if=\"actionBarVnodes\"\n\t\t\t\thide-on=\"tablet\"\n\t\t\t\tposition=\"fixed\"\n\t\t\t>\n\t\t\t\t<v :nodes=\"actionBarVnodes\" />\n\t\t\t</atomic-action-bar>\n\t\t</m-transition>\n\t</div>\n</template>\n\n<script>\nimport { throttle } from 'lodash';\nimport V from 'vue-v';\nimport { MTransition } from '@square/maker/components/Transition';\nimport { springUpBounceFn, springDownBounceFn } from '@square/maker/utils/transitions';\nimport AtomicActionBar from './AtomicActionBar.vue';\n\nexport default {\n\tcomponents: {\n\t\tV,\n\t\tMTransition,\n\t\tAtomicActionBar,\n\t},\n\n\tprovide() {\n\t\tconst vm = this;\n\t\treturn {\n\t\t\t'action-bar': {\n\t\t\t\tregister(uid, vnodes) {\n\t\t\t\t\tvm.registeredBy = uid;\n\t\t\t\t\tvm.setActionbar(vnodes);\n\t\t\t\t},\n\t\t\t\tunregister(uid) {\n\t\t\t\t\tif (vm.registeredBy === uid) {\n\t\t\t\t\t\tvm.setActionbar();\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\t},\n\n\tinheritAttrs: false,\n\n\tdata() {\n\t\treturn {\n\t\t\tregisteredBy: undefined,\n\t\t\tactionBarVnodes: undefined,\n\t\t\tspringUpBounceFn,\n\t\t\tspringDownBounceFn,\n\t\t};\n\t},\n\n\tcomputed: {\n\t\thasActionBar() {\n\t\t\treturn !!this.actionBarVnodes;\n\t\t},\n\t},\n\n\tcreated() {\n\t\tconst shortDelayMs = 50;\n\t\tthis.setActionbar = throttle(this.setActionbar, shortDelayMs, { leading: false });\n\t},\n\n\tmethods: {\n\t\tsetActionbar(vnodes) {\n\t\t\tthis.actionBarVnodes = vnodes;\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n/* tempfix: chrome-bottom-offset - value set outside of maker */\n/* stylelint-disable length-zero-no-unit */\n.ActionBarLayer {\n\t--actionbar-top-padding: 24px;\n\t--actionbar-size: 48px;\n\t--actionbar-bottom-padding:\n\t\tcalc(\n\t\t\t24px\n\t\t\t+ env(safe-area-inset-bottom, 24px)\n\t\t\t+ var(--chrome-bottom-offset, 0px)\n\t\t);\n\n\tpadding-bottom:\n\t\tcalc(\n\t\t\tvar(--actionbar-top-padding)\n\t\t\t+ var(--actionbar-size)\n\t\t\t+ var(--actionbar-bottom-padding)\n\t\t);\n\n\t&.NoActionBar {\n\t\tpadding-bottom: 0;\n\t}\n}\n\n@media screen and (--for-tablet-landscape-up) {\n\t.ActionBarLayer {\n\t\tpadding-bottom: 0;\n\t}\n}\n</style>\n","<template>\n\t<button\n\t\t:class=\"[\n\t\t\t$s.Button,\n\t\t\t$s[`align_${resolvedAlign}`],\n\t\t\t$s[`shape_${resolvedShape}`],\n\t\t\t{\n\t\t\t\t[$s.fullWidth]: resolvedFullWidth,\n\t\t\t\t[$s.iconButton]: isSingleChild() && !resolvedFullWidth,\n\t\t\t\t[$s.hasMainAndLabelText]: hasMainAndLabelText(),\n\t\t\t\t[$s.loading]: loading,\n\t\t\t}\n\t\t]\"\n\t\t:type=\"type\"\n\t\t:disabled=\"isDisabled\"\n\t\t:style=\"style\"\n\t\tv-bind=\"$attrs\"\n\t\tv-on=\"$listeners\"\n\t>\n\t\t<m-loading\n\t\t\tv-if=\"loading\"\n\t\t\t:class=\"$s.Loading\"\n\t\t/>\n\t\t<span\n\t\t\t:class=\"[\n\t\t\t\t$s.MainText,\n\t\t\t\t{\n\t\t\t\t\t[$s.TruncateText]: !isSingleChild(),\n\t\t\t\t}\n\t\t\t]\"\n\t\t>\n\t\t\t<!-- @slot Button label -->\n\t\t\t<slot />\n\t\t</span>\n\t\t<span\n\t\t\tv-if=\"$scopedSlots.information\"\n\t\t\t:class=\"[$s.InformationText, $s.TruncateText]\"\n\t\t>\n\t\t\t<!-- @slot Information label -->\n\t\t\t<slot\n\t\t\t\tname=\"information\"\n\t\t\t/>\n\t\t</span>\n\t\t<pseudo-window\n\t\t\tdocument\n\t\t\t@keyup.esc=\"handleEscKey\"\n\t\t/>\n\t</button>\n</template>\n\n<script>\nimport { colord } from 'colord';\nimport PseudoWindow from 'vue-pseudo-window';\nimport { MLoading } from '@square/maker/components/Loading';\nimport { MThemeKey, defaultTheme, resolveThemeableProps } from '@square/maker/components/Theme';\nimport { getContrast } from '@square/maker/utils/get-contrast';\n\nfunction setColorVariables(tokens) {\n\tconst colorMainObject = colord(tokens.color);\n\tconst colorContrast = getContrast(tokens.color, tokens.textColor);\n\n\t// Define each state adjustment and generated color\n\tconst stateAdjustment = colorMainObject.isDark() ? 'lighten' : 'darken';\n\tconst hoverStateAdjust = 0.08;\n\tconst activeStateAdjust = 0.16;\n\tconst focusAlphaAdjust = 0.3;\n\tconst colorHover = colorMainObject[stateAdjustment](hoverStateAdjust).toHex();\n\tconst colorActive = colorMainObject[stateAdjustment](activeStateAdjust).toHex();\n\tconst colorFocus = colorMainObject.alpha(focusAlphaAdjust).toHex();\n\n\treturn {\n\t\t'--color-main': tokens.color,\n\t\t'--color-contrast': colorContrast,\n\t\t'--color-hover': colorHover,\n\t\t'--color-active': colorActive,\n\t\t'--color-focus': colorFocus,\n\t};\n}\n\n/**\n * Button component\n * @inheritAttrs button\n * @inheritListeners button\n */\nexport default {\n\tcomponents: {\n\t\tMLoading,\n\t\tPseudoWindow,\n\t},\n\n\tinject: {\n\t\ttheme: {\n\t\t\tdefault: defaultTheme(),\n\t\t\tfrom: MThemeKey,\n\t\t},\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * Type of the button\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'button',\n\t\t},\n\t\t/**\n\t\t * Whether to make the button full-width\n\t\t */\n\t\tfullWidth: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * Background color of button\n\t\t */\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (color) => colord(color).isValid(),\n\t\t},\n\t\t/**\n\t\t * Text color of button\n\t\t */\n\t\ttextColor: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (color) => colord(color).isValid(),\n\t\t},\n\t\t/**\n\t\t * Shape of button\n\t\t */\n\t\tshape: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (shape) => ['squared', 'rounded', 'pill'].includes(shape),\n\t\t},\n\t\t/**\n\t\t * Toggles button disabled state\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * How to align button's contents\n\t\t */\n\t\talign: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (align) => ['center', 'stack', 'space-between'].includes(align),\n\t\t},\n\t\t/**\n\t\t * Toggles button loading state\n\t\t */\n\t\tloading: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t...resolveThemeableProps('actionbarbutton', [\n\t\t\t'color',\n\t\t\t'shape',\n\t\t\t'textColor',\n\t\t\t'align',\n\t\t\t'fullWidth',\n\t\t]),\n\t\tstyle() {\n\t\t\tlet tokens = {\n\t\t\t\tcolor: this.resolvedColor,\n\t\t\t\ttextColor: this.resolvedTextColor,\n\t\t\t};\n\t\t\t/**\n\t\t\t * Return different default theme colors for icon buttons\n\t\t\t * This can be removed if the action bar icon button ever\n\t\t\t * becomes its own component or if we add theming for patterns\n\t\t\t */\n\t\t\tif (this.isSingleChild()) {\n\t\t\t\ttokens = {\n\t\t\t\t\tcolor: this.color || this.theme.colors.elevation || '#000',\n\t\t\t\t\ttextColor: this.textColor || this.resolvedColor,\n\t\t\t\t};\n\t\t\t}\n\t\t\treturn setColorVariables(tokens);\n\t\t},\n\n\t\tisDisabled() {\n\t\t\treturn this.disabled || this.loading;\n\t\t},\n\t},\n\n\tmethods: {\n\t\tgetVnodesWithContent(vnodes) {\n\t\t\treturn (vnodes || []).filter(\n\t\t\t\t(vnode) => vnode.tag || vnode.text.trim().length > 0,\n\t\t\t);\n\t\t},\n\n\t\tisSingleChild() {\n\t\t\tif (this.$scopedSlots.information) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\tconst children = this.getVnodesWithContent(this.$slots.default);\n\t\t\tconst singleChild = 1;\n\t\t\treturn children.length === singleChild && children[0].tag;\n\t\t},\n\n\t\thasMainAndLabelText() {\n\t\t\tif (!this.$scopedSlots.information) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\tconst main = this.getVnodesWithContent(this.$slots.default);\n\t\t\tconst info = this.getVnodesWithContent(this.$scopedSlots.information());\n\t\t\treturn main.length > 0 && info.length > 0;\n\t\t},\n\n\t\thandleEscKey() {\n\t\t\t/**\n\t\t\t * ESC keyup event on window\n\t\t\t * @property {string}\n\t\t\t */\n\t\t\tthis.$emit('window-esc');\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.Button {\n\t--medium-height: 48px;\n\t--medium-font-size: 14px;\n\t--medium-padding: 24px;\n\t--medium-line-height: 1.77;\n\t--radius-rounded-button: 8px;\n\t--radius-pill-button: 32px;\n\n\tposition: relative;\n\tdisplay: inline-flex;\n\talign-items: center;\n\tmin-width: 0;\n\theight: var(--medium-height);\n\tpadding: 0 var(--medium-padding);\n\tcolor: var(--text-color);\n\tfont-weight: $maker-font-label-font-weight;\n\tfont-size: var(--medium-font-size);\n\tfont-family: $maker-font-label-font-family;\n\tvertical-align: middle;\n\tbackground-color: var(--color-main);\n\tborder: none;\n\tborder-radius: $maker-shape-button-border-radius;\n\toutline: none;\n\tbox-shadow:\n\t\tvar(--outline-border, 0 0),\n\t\tvar(--focus-border, 0 0);\n\tcursor: pointer;\n\ttransition:\n\t\tcolor 0.2s ease-in,\n\t\tbackground-color 0.2s ease-in;\n\tuser-select: none;\n\ttouch-action: manipulation;\n\tfill: currentColor;\n\n\t& > * {\n\t\tline-height: var(--medium-line-height);\n\t}\n\n\t&.iconButton {\n\t\tdisplay: inline-flex;\n\t\tflex: 0 0 auto;\n\t\talign-items: center;\n\t\twidth: var(--medium-height);\n\t\theight: var(--medium-height);\n\t\tpadding: 0;\n\t}\n\n\t--text-color: var(--color-contrast, #000);\n\n\t&.iconButton > * {\n\t\tline-height: 0;\n\t}\n\n\t&.fullWidth {\n\t\twidth: 100%;\n\t}\n\n\t&.align_center {\n\t\tjustify-content: center;\n\t}\n\n\t&.align_stack {\n\t\tflex-direction: column;\n\t\tjustify-content: space-evenly;\n\t\tpadding-top: 4px;\n\t\tpadding-bottom: 4px;\n\t}\n\n\t&.align_space-between {\n\t\tflex-direction: row-reverse;\n\t\tjustify-content: space-between;\n\t}\n\n\t&.shape_squared {\n\t\tborder-radius: 0;\n\t}\n\n\t&.shape_rounded {\n\t\tborder-radius: var(--radius-rounded-button);\n\t}\n\n\t&.shape_pill {\n\t\tborder-radius: var(--radius-pill-button);\n\t}\n\n\t&:disabled {\n\t\tcursor: initial;\n\n\t\t& > * {\n\t\t\topacity: 0.5;\n\t\t}\n\t}\n\n\t&:focus {\n\t\t--focus-border:\n\t\t\t0 0 0 1px $maker-color-neutral-20,\n\t\t\t0 0 0 3px var(--color-focus);\n\t}\n\n\t&:active {\n\t\tbackground-color: var(--color-active, var(--color-main));\n\t}\n\n\t@media (hover: hover) {\n\t\t&:hover {\n\t\t\tbackground-color: var(--color-hover, var(--color-main));\n\t\t}\n\t}\n\n\t&.loading {\n\t\tcolor: transparent;\n\t}\n}\n\n.Loading {\n\tposition: absolute;\n\ttop: 4px;\n\tright: 4px;\n\tbottom: 4px;\n\tleft: 4px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcolor: var(--text-color);\n\tbackground-color: inherit;\n\tborder-radius: 32px;\n}\n\n.MainText {\n\tgap: 8px;\n\twidth: max-content;\n}\n\n.iconButton .MainText {\n\tdisplay: flex;\n}\n\n.InformationText {\n\twidth: min-content;\n\topacity: 0.6;\n}\n\n.align_stack .InformationText {\n\twidth: max-content;\n}\n\n.hasMainAndLabelText {\n\ttext-align: right;\n\n\t& .InformationText {\n\t\ttext-align: left;\n\t}\n}\n\n.TruncateText {\n\t/* -webkit-box is supported by all modern browsers */\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: 2;\n\t-webkit-box-orient: vertical;\n\twidth: max-content;\n\toverflow: hidden;\n\tline-height: 1.1;\n\ttext-overflow: ellipsis;\n}\n\n.align_stack .TruncateText {\n\t-webkit-line-clamp: 1;\n}\n\n.Button.align_center .InformationText {\n\tmargin-left: 8px;\n}\n\n.Button.align_space-between .InformationText {\n\tmargin-right: 8px;\n}\n</style>\n","<template>\n\t<div :class=\"$s.ActionBarWrapper\">\n\t\t<m-transition\n\t\t\t:enter=\"springUpBounceFn\"\n\t\t\t:leave=\"springDownBounceFn\"\n\t\t>\n\t\t\t<atomic-action-bar\n\t\t\t\tv-if=\"loaded\"\n\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\tv-on=\"$listeners\"\n\t\t\t>\n\t\t\t\t<slot />\n\t\t\t</atomic-action-bar>\n\t\t</m-transition>\n\t</div>\n</template>\n\n<script>\nimport { MTransition } from '@square/maker/components/Transition';\nimport { springUpBounceFn, springDownBounceFn } from '@square/maker/utils/transitions';\nimport AtomicActionBar from './AtomicActionBar.vue';\n\n/**\n * @inheritAttrs ./AtomicActionBar.vue\n * @inheritListeners ./AtomicActionBar.vue\n */\nexport default {\n\tcomponents: {\n\t\tAtomicActionBar,\n\t\tMTransition,\n\t},\n\n\tinheritAttrs: false,\n\n\tdata() {\n\t\treturn {\n\t\t\tloaded: false,\n\t\t\tspringUpBounceFn,\n\t\t\tspringDownBounceFn,\n\t\t};\n\t},\n\n\tmounted() {\n\t\tconst enterDelay = 600;\n\t\tsetTimeout(() => {\n\t\t\tthis.loaded = !!this.$slots.default;\n\t\t}, enterDelay);\n\t},\n};\n</script>\n\n<style module=\"$s\">\n/* tempfix: chrome-bottom-offset - value set outside of maker */\n/* stylelint-disable length-zero-no-unit */\n.ActionBarWrapper {\n\t--actionbar-size: 48px;\n\t--actionbar-bottom-padding:\n\t\tcalc(\n\t\t\t24px\n\t\t\t+ var(--actionbar-size)\n\t\t\t+ env(safe-area-inset-bottom, 24px)\n\t\t\t+ var(--chrome-bottom-offset, 0px)\n\t\t);\n\n\tpadding: 24px 24px var(--actionbar-bottom-padding) 24px;\n}\n</style>\n"],"names":[],"sourceRoot":""}