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

Maker Design System by Square

{"version":3,"file":"styles.css","mappings":"AA+VA,gBAEA,mBADA,aAEA,uBACA,yCACA,CAEA,gBAEA,aADA,iBAEA,CAEA,gBAEA,eADA,cAMA,CAHA,+BACA,WACA,CAGA,gCAMA,6BAJA,4CAGA,wDADA,kBAGA,kCAJA,mDAKA,CAEA,gBAOA,mBASA,0BAFA,iBACA,SAXA,SAQA,gCANA,aAIA,YAFA,uBAHA,OAMA,UAVA,kBAEA,QAUA,kBAXA,MAOA,UAkBA,CATA,sFAGA,wBADA,QAEA,CAEA,sBACA,YACA,CAGA,gBAEA,YADA,UAEA,CAEA,gBASA,mBADA,SALA,WACA,YAEA,gBADA,UAJA,kBAMA,mBALA,SAQA","sources":["webpack://@square/maker/./src/components/Stepper/src/Stepper.vue"],"sourcesContent":["<template>\n\t<div\n\t\t:class=\"$s.Stepper\"\n\t\t:aria-label=\"ariaLabel\"\n\t\t:aria-labelledby=\"ariaLabelledby\"\n\t\t:aria-describedby=\"ariaDescribedby\"\n\t\trole=\"group\"\n\t>\n\t\t<!-- Invisible live region for announcing value changes -->\n\t\t<div\n\t\t\t:aria-live=\"ariaLive\"\n\t\t\t:aria-atomic=\"true\"\n\t\t\t:class=\"$s.ScreenReaderOnly\"\n\t\t>\n\t\t\t{{ screenReaderAnnouncement }}\n\t\t</div>\n\t\t<m-button\n\t\t\tvariant=\"fill\"\n\t\t\tsize=\"small\"\n\t\t\t:color=\"resolvedColor\"\n\t\t\t:text-color=\"resolvedTextColor\"\n\t\t\t:shape=\"resolvedShape\"\n\t\t\t:disabled=\"value === minVal\"\n\t\t\t:aria-label=\"decrementAriaLabel\"\n\t\t\t@click=\"decrement\"\n\t\t>\n\t\t\t<m-icon\n\t\t\t\t:class=\"$s.Icon\"\n\t\t\t\tname=\"minus\"\n\t\t\t/>\n\t\t</m-button>\n\t\t<div\n\t\t\t:class=\"$s.Quantity\"\n\t\t>\n\t\t\t<input\n\t\t\t\tv-if=\"isSettingManualValue\"\n\t\t\t\tref=\"manualInput\"\n\t\t\t\tv-model=\"manualValue\"\n\t\t\t\t:class=\"$s.QuantityManualInput\"\n\t\t\t\t:min=\"min\"\n\t\t\t\t:max=\"max\"\n\t\t\t\t:aria-label=\"computedInputAriaLabel\"\n\t\t\t\t:aria-describedby=\"inputAriaDescribedby\"\n\t\t\t\ttype=\"number\"\n\t\t\t\tinputmode=\"numeric\"\n\t\t\t\t@change=\"commitManualValue\"\n\t\t\t\t@blur=\"commitManualValue\"\n\t\t\t\t@keydown.escape=\"cancelManualInput\"\n\t\t\t>\n\t\t\t<span\n\t\t\t\t:class=\"[\n\t\t\t\t\t$s.QuantityReadonly,\n\t\t\t\t\t{ [$s.isManualInput]: isSettingManualValue }\n\t\t\t\t]\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\trole=\"spinbutton\"\n\t\t\t\t:aria-valuemin=\"min !== undefined ? Number(min) : undefined\"\n\t\t\t\t:aria-valuemax=\"max !== undefined ? Number(max) : undefined\"\n\t\t\t\t:aria-valuenow=\"value\"\n\t\t\t\t:aria-label=\"computedQuantityAriaLabel\"\n\t\t\t\t@click=\"triggerManualInput\"\n\t\t\t\t@keydown=\"onQuantityKeydown\"\n\t\t\t>\n\t\t\t\t<!-- This allows us to auto-resize the input as users type -->\n\t\t\t\t{{ isSettingManualValue ? manualValue : value }}\n\t\t\t</span>\n\t\t</div>\n\t\t<m-button\n\t\t\tvariant=\"fill\"\n\t\t\tsize=\"small\"\n\t\t\t:color=\"resolvedColor\"\n\t\t\t:text-color=\"resolvedTextColor\"\n\t\t\t:shape=\"resolvedShape\"\n\t\t\t:disabled=\"value === maxVal\"\n\t\t\t:aria-label=\"incrementAriaLabel\"\n\t\t\t@click=\"increment\"\n\t\t>\n\t\t\t<m-icon\n\t\t\t\t:class=\"$s.Icon\"\n\t\t\t\tname=\"plus\"\n\t\t\t/>\n\t\t</m-button>\n\t</div>\n</template>\n\n<script>\nimport { colord } from 'colord';\nimport { MThemeKey, defaultTheme, resolveThemeableProps } from '@square/maker/components/Theme';\nimport { MButton } from '@square/maker/components/Button';\nimport { MIcon } from '@square/maker/components/Icon';\nimport { BASE_TEN } from '@square/maker/utils/constants';\n\nexport default {\n\tcomponents: {\n\t\tMButton,\n\t\tMIcon,\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\tmodel: {\n\t\tprop: 'value',\n\t\tevent: 'stepper:update',\n\t},\n\n\tprops: {\n\t\t/**\n\t\t * stepper's current value\n\t\t */\n\t\tvalue: {\n\t\t\ttype: Number,\n\t\t\trequired: true,\n\t\t},\n\t\t/**\n\t\t * stepper min value\n\t\t */\n\t\tmin: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * stepper max value\n\t\t */\n\t\tmax: {\n\t\t\ttype: [Number, String],\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * stepper button background color\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 * stepper button text color\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 * stepper button shape\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 * Stepper aria label\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Stepper aria labelled by\n\t\t */\n\t\tariaLabelledby: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Stepper aria described by\n\t\t */\n\t\tariaDescribedby: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Decrement aria label\n\t\t */\n\t\tdecrementAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: 'Decrement',\n\t\t},\n\t\t/**\n\t\t * Increment aria label\n\t\t */\n\t\tincrementAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: 'Increment',\n\t\t},\n\t\t/**\n\t\t * Input aria label\n\t\t */\n\t\tinputAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Input aria described by\n\t\t */\n\t\tinputAriaDescribedby: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Quantity aria label\n\t\t */\n\t\tquantityAriaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * Aria live politeness setting for value announcements\n\t\t */\n\t\tariaLive: {\n\t\t\ttype: String,\n\t\t\tdefault: 'polite',\n\t\t\tvalidator: (value) => ['off', 'polite', 'assertive'].includes(value),\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tmanualValue: 0,\n\t\t\tisSettingManualValue: false,\n\t\t\tlastAnnouncedValue: undefined,\n\t\t};\n\t},\n\n\tcomputed: {\n\t\t...resolveThemeableProps('stepper', [\n\t\t\t'color',\n\t\t\t'textColor',\n\t\t\t'shape',\n\t\t]),\n\n\t\tmaxVal() {\n\t\t\treturn Number.parseInt(this.max, BASE_TEN);\n\t\t},\n\n\t\tminVal() {\n\t\t\treturn Number.parseInt(this.min, BASE_TEN);\n\t\t},\n\n\t\tcomputedInputAriaLabel() {\n\t\t\treturn this.inputAriaLabel || `Enter value between ${this.minVal || 'any'} and ${this.maxVal || 'any'}`;\n\t\t},\n\n\t\tcomputedQuantityAriaLabel() {\n\t\t\treturn this.quantityAriaLabel || `Current value ${this.value}. Click to edit manually.`;\n\t\t},\n\n\t\tscreenReaderAnnouncement() {\n\t\t\t// Return current announcement text\n\t\t\treturn this.lastAnnouncedValue !== undefined ? `Value is ${this.value}` : '';\n\t\t},\n\t},\n\n\twatch: {\n\t\tvalue(newValue) {\n\t\t\t// Trigger announcement when value changes\n\t\t\tthis.lastAnnouncedValue = newValue;\n\t\t},\n\t},\n\n\tmethods: {\n\t\tincrement() {\n\t\t\tif (!Number.isNaN(this.maxVal) && this.value >= this.maxVal) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst incrementBy = 1;\n\t\t\tthis.emitUpdate(this.value + incrementBy);\n\t\t},\n\t\tdecrement() {\n\t\t\tif (!Number.isNaN(this.minVal) && this.value <= this.minVal) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst decrementBy = 1;\n\t\t\tthis.emitUpdate(this.value - decrementBy);\n\t\t},\n\n\t\ttriggerManualInput() {\n\t\t\tthis.manualValue = this.value;\n\t\t\tthis.isSettingManualValue = true;\n\t\t\tthis.$nextTick(() => {\n\t\t\t\tthis.$refs.manualInput.focus();\n\t\t\t\tthis.$refs.manualInput.select();\n\t\t\t});\n\t\t},\n\n\t\tcommitManualValue(event) {\n\t\t\tevent.preventDefault();\n\t\t\tevent.stopPropagation();\n\n\t\t\tconst newValue = Math.round(Number.parseFloat(this.manualValue, BASE_TEN));\n\t\t\tthis.isSettingManualValue = false;\n\n\t\t\tif (Number.isNaN(newValue) || newValue === null || newValue === undefined) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tthis.emitUpdate(this.validateManualValueInRange(newValue));\n\t\t},\n\n\t\tvalidateManualValueInRange(newValue) {\n\t\t\tif (!Number.isNaN(this.minVal) && newValue < this.minVal) {\n\t\t\t\treturn this.minVal;\n\t\t\t}\n\n\t\t\tif (!Number.isNaN(this.maxVal) && newValue > this.maxVal) {\n\t\t\t\treturn this.maxVal;\n\t\t\t}\n\n\t\t\treturn newValue;\n\t\t},\n\n\t\temitUpdate(newValue) {\n\t\t\t/**\n\t\t\t * updated stepper value\n\t\t\t * @property {number}\n\t\t\t */\n\t\t\tthis.$emit('stepper:update', newValue);\n\t\t},\n\n\t\tonQuantityKeydown(event) {\n\t\t\t// Handle keyboard navigation for the quantity spinbutton\n\t\t\tif (event.key === 'Enter' || event.key === ' ') {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tthis.triggerManualInput();\n\t\t\t} else if (event.key === 'ArrowUp') {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tthis.increment();\n\t\t\t} else if (event.key === 'ArrowDown') {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tthis.decrement();\n\t\t\t}\n\t\t},\n\n\t\tcancelManualInput() {\n\t\t\tthis.isSettingManualValue = false;\n\t\t\tthis.manualValue = this.value;\n\t\t},\n\t},\n};\n\n</script>\n\n<style module=\"$s\">\n.Stepper {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tuser-select: none;\n}\n\n.Quantity {\n\tposition: relative;\n\tmargin: 0 4px;\n}\n\n.QuantityReadonly {\n\tpadding: 0 12px;\n\tcursor: pointer;\n\n\t&.isManualInput {\n\t\tcolor: transparent;\n\t}\n}\n\n.QuantityReadonly,\n.QuantityManualInput {\n\tcolor: $maker-color-neutral-90;\n\tfont-weight: $maker-font-label-font-weight;\n\tfont-size: inherit;\n\tfont-family: $maker-font-label-font-family;\n\tfont-feature-settings: \"tnum\";\n\tfont-variant-numeric: tabular-nums;\n}\n\n.QuantityManualInput {\n\tposition: absolute;\n\ttop: 0;\n\tright: 0;\n\tbottom: 0;\n\tleft: 0;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 100%;\n\theight: 100%;\n\tpadding: 0;\n\tcolor: var(--neutral-90, inherit);\n\ttext-align: center;\n\tbackground: transparent;\n\tborder: 0;\n\t-moz-appearance: textfield;\n\n\t&::-webkit-inner-spin-button,\n\t&::-webkit-outer-spin-button {\n\t\tmargin: 0;\n\t\t-webkit-appearance: none;\n\t}\n\n\t&:focus {\n\t\toutline: none;\n\t}\n}\n\n.Icon {\n\twidth: 16px;\n\theight: 16px;\n}\n\n.ScreenReaderOnly {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tmargin: -1px;\n\tpadding: 0;\n\toverflow: hidden;\n\twhite-space: nowrap;\n\tborder: 0;\n\tclip: rect(0, 0, 0, 0);\n}\n</style>\n"],"names":[],"sourceRoot":""}