Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@justeattakeaway/pie-button
Advanced tools
@justeattakeaway/pie-button - npm Package Compare versions
Comparing version 0.0.0-snapshot-release-20240209144253 to 0.0.0-snapshot-release-20240229152723
| { | ||
| "schemaVersion": "1.0.0", | ||
| "readme": "", | ||
| "modules": [ | ||
| "schemaVersion": "1.0.0", | ||
| "readme": "", | ||
| "modules": [ | ||
| { | ||
| "kind": "javascript-module", | ||
| "path": "src/defs-react.js", | ||
| "declarations": [], | ||
| "exports": [] | ||
| }, | ||
| { | ||
| "kind": "javascript-module", | ||
| "path": "src/defs.js", | ||
| "declarations": [ | ||
| { | ||
| "kind": "javascript-module", | ||
| "path": "src/defs.js", | ||
| "declarations": [ | ||
| { | ||
| "kind": "variable", | ||
| "name": "sizes", | ||
| "type": { | ||
| "text": "['xsmall', 'small-productive', 'small-expressive', 'medium', 'large']" | ||
| }, | ||
| "default": "['xsmall', 'small-productive', 'small-expressive', 'medium', 'large']" | ||
| }, | ||
| { | ||
| "kind": "variable", | ||
| "name": "responsiveSizes", | ||
| "type": { | ||
| "text": "['productive', 'expressive']" | ||
| }, | ||
| "default": "['productive', 'expressive']" | ||
| }, | ||
| { | ||
| "kind": "variable", | ||
| "name": "types", | ||
| "type": { | ||
| "text": "['submit', 'button', 'reset']" | ||
| }, | ||
| "default": "['submit', 'button', 'reset']" | ||
| }, | ||
| { | ||
| "kind": "variable", | ||
| "name": "variants", | ||
| "type": { | ||
| "text": "[\n 'primary', 'secondary', 'outline', 'outline-inverse', 'ghost',\n 'inverse', 'ghost-inverse', 'destructive', 'destructive-ghost',\n]" | ||
| }, | ||
| "default": "[\n 'primary', 'secondary', 'outline', 'outline-inverse', 'ghost',\n 'inverse', 'ghost-inverse', 'destructive', 'destructive-ghost',\n]" | ||
| }, | ||
| { | ||
| "kind": "variable", | ||
| "name": "iconPlacements", | ||
| "type": { | ||
| "text": "['leading', 'trailing']" | ||
| }, | ||
| "default": "['leading', 'trailing']" | ||
| }, | ||
| { | ||
| "kind": "variable", | ||
| "name": "formEncodingtypes", | ||
| "type": { | ||
| "text": "['application/x-www-form-urlencoded', 'multipart/form-data', 'text/plain']" | ||
| }, | ||
| "default": "['application/x-www-form-urlencoded', 'multipart/form-data', 'text/plain']" | ||
| }, | ||
| { | ||
| "kind": "variable", | ||
| "name": "formMethodTypes", | ||
| "type": { | ||
| "text": "['post', 'get', 'dialog']" | ||
| }, | ||
| "default": "['post', 'get', 'dialog']" | ||
| }, | ||
| { | ||
| "kind": "variable", | ||
| "name": "formTargetTypes", | ||
| "type": { | ||
| "text": "['_self', '_blank', '_parent', '_top']" | ||
| }, | ||
| "default": "['_self', '_blank', '_parent', '_top']" | ||
| } | ||
| ], | ||
| "exports": [ | ||
| { | ||
| "kind": "js", | ||
| "name": "sizes", | ||
| "declaration": { | ||
| "name": "sizes", | ||
| "module": "src/defs.js" | ||
| } | ||
| }, | ||
| { | ||
| "kind": "js", | ||
| "name": "responsiveSizes", | ||
| "declaration": { | ||
| "name": "responsiveSizes", | ||
| "module": "src/defs.js" | ||
| } | ||
| }, | ||
| { | ||
| "kind": "js", | ||
| "name": "types", | ||
| "declaration": { | ||
| "name": "types", | ||
| "module": "src/defs.js" | ||
| } | ||
| }, | ||
| { | ||
| "kind": "js", | ||
| "name": "variants", | ||
| "declaration": { | ||
| "name": "variants", | ||
| "module": "src/defs.js" | ||
| } | ||
| }, | ||
| { | ||
| "kind": "js", | ||
| "name": "iconPlacements", | ||
| "declaration": { | ||
| "name": "iconPlacements", | ||
| "module": "src/defs.js" | ||
| } | ||
| }, | ||
| { | ||
| "kind": "js", | ||
| "name": "formEncodingtypes", | ||
| "declaration": { | ||
| "name": "formEncodingtypes", | ||
| "module": "src/defs.js" | ||
| } | ||
| }, | ||
| { | ||
| "kind": "js", | ||
| "name": "formMethodTypes", | ||
| "declaration": { | ||
| "name": "formMethodTypes", | ||
| "module": "src/defs.js" | ||
| } | ||
| }, | ||
| { | ||
| "kind": "js", | ||
| "name": "formTargetTypes", | ||
| "declaration": { | ||
| "name": "formTargetTypes", | ||
| "module": "src/defs.js" | ||
| } | ||
| } | ||
| ] | ||
| "kind": "variable", | ||
| "name": "sizes", | ||
| "type": { | ||
| "text": "['xsmall', 'small-productive', 'small-expressive', 'medium', 'large']" | ||
| }, | ||
| "default": "['xsmall', 'small-productive', 'small-expressive', 'medium', 'large']" | ||
| }, | ||
| { | ||
| "kind": "javascript-module", | ||
| "path": "src/index.js", | ||
| "declarations": [ | ||
| "kind": "variable", | ||
| "name": "responsiveSizes", | ||
| "type": { | ||
| "text": "['productive', 'expressive']" | ||
| }, | ||
| "default": "['productive', 'expressive']" | ||
| }, | ||
| { | ||
| "kind": "variable", | ||
| "name": "types", | ||
| "type": { | ||
| "text": "['submit', 'button', 'reset']" | ||
| }, | ||
| "default": "['submit', 'button', 'reset']" | ||
| }, | ||
| { | ||
| "kind": "variable", | ||
| "name": "variants", | ||
| "type": { | ||
| "text": "[\r\n 'primary', 'secondary', 'outline', 'outline-inverse', 'ghost',\r\n 'inverse', 'ghost-inverse', 'destructive', 'destructive-ghost',\r\n]" | ||
| }, | ||
| "default": "[\r\n 'primary', 'secondary', 'outline', 'outline-inverse', 'ghost',\r\n 'inverse', 'ghost-inverse', 'destructive', 'destructive-ghost',\r\n]" | ||
| }, | ||
| { | ||
| "kind": "variable", | ||
| "name": "iconPlacements", | ||
| "type": { | ||
| "text": "['leading', 'trailing']" | ||
| }, | ||
| "default": "['leading', 'trailing']" | ||
| }, | ||
| { | ||
| "kind": "variable", | ||
| "name": "formEncodingtypes", | ||
| "type": { | ||
| "text": "['application/x-www-form-urlencoded', 'multipart/form-data', 'text/plain']" | ||
| }, | ||
| "default": "['application/x-www-form-urlencoded', 'multipart/form-data', 'text/plain']" | ||
| }, | ||
| { | ||
| "kind": "variable", | ||
| "name": "formMethodTypes", | ||
| "type": { | ||
| "text": "['post', 'get', 'dialog']" | ||
| }, | ||
| "default": "['post', 'get', 'dialog']" | ||
| }, | ||
| { | ||
| "kind": "variable", | ||
| "name": "formTargetTypes", | ||
| "type": { | ||
| "text": "['_self', '_blank', '_parent', '_top']" | ||
| }, | ||
| "default": "['_self', '_blank', '_parent', '_top']" | ||
| } | ||
| ], | ||
| "exports": [ | ||
| { | ||
| "kind": "js", | ||
| "name": "sizes", | ||
| "declaration": { | ||
| "name": "sizes", | ||
| "module": "src/defs.js" | ||
| } | ||
| }, | ||
| { | ||
| "kind": "js", | ||
| "name": "responsiveSizes", | ||
| "declaration": { | ||
| "name": "responsiveSizes", | ||
| "module": "src/defs.js" | ||
| } | ||
| }, | ||
| { | ||
| "kind": "js", | ||
| "name": "types", | ||
| "declaration": { | ||
| "name": "types", | ||
| "module": "src/defs.js" | ||
| } | ||
| }, | ||
| { | ||
| "kind": "js", | ||
| "name": "variants", | ||
| "declaration": { | ||
| "name": "variants", | ||
| "module": "src/defs.js" | ||
| } | ||
| }, | ||
| { | ||
| "kind": "js", | ||
| "name": "iconPlacements", | ||
| "declaration": { | ||
| "name": "iconPlacements", | ||
| "module": "src/defs.js" | ||
| } | ||
| }, | ||
| { | ||
| "kind": "js", | ||
| "name": "formEncodingtypes", | ||
| "declaration": { | ||
| "name": "formEncodingtypes", | ||
| "module": "src/defs.js" | ||
| } | ||
| }, | ||
| { | ||
| "kind": "js", | ||
| "name": "formMethodTypes", | ||
| "declaration": { | ||
| "name": "formMethodTypes", | ||
| "module": "src/defs.js" | ||
| } | ||
| }, | ||
| { | ||
| "kind": "js", | ||
| "name": "formTargetTypes", | ||
| "declaration": { | ||
| "name": "formTargetTypes", | ||
| "module": "src/defs.js" | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "kind": "javascript-module", | ||
| "path": "src/index.js", | ||
| "declarations": [ | ||
| { | ||
| "kind": "class", | ||
| "description": "", | ||
| "name": "PieButton", | ||
| "slots": [ | ||
| { | ||
| "description": "The icon slot", | ||
| "name": "icon" | ||
| }, | ||
| { | ||
| "description": "Default slot", | ||
| "name": "" | ||
| } | ||
| ], | ||
| "members": [ | ||
| { | ||
| "kind": "field", | ||
| "name": "size", | ||
| "type": { | ||
| "text": "ButtonProps['size']" | ||
| }, | ||
| "privacy": "public", | ||
| "default": "'medium'", | ||
| "attribute": "size" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "type", | ||
| "type": { | ||
| "text": "ButtonProps['type']" | ||
| }, | ||
| "privacy": "public", | ||
| "default": "'submit'", | ||
| "attribute": "type" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "variant", | ||
| "type": { | ||
| "text": "ButtonProps['variant']" | ||
| }, | ||
| "privacy": "public", | ||
| "default": "'primary'", | ||
| "attribute": "variant" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "iconPlacement", | ||
| "type": { | ||
| "text": "ButtonProps['iconPlacement']" | ||
| }, | ||
| "privacy": "public", | ||
| "default": "'leading'", | ||
| "attribute": "iconPlacement" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "disabled", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "privacy": "public", | ||
| "default": "false", | ||
| "attribute": "disabled" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "isLoading", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "privacy": "public", | ||
| "default": "false", | ||
| "attribute": "isLoading", | ||
| "reflects": true | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "isFullWidth", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "privacy": "public", | ||
| "default": "false", | ||
| "attribute": "isFullWidth" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "isResponsive", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "privacy": "public", | ||
| "default": "false", | ||
| "attribute": "isResponsive" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "name", | ||
| "type": { | ||
| "text": "string | undefined" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "name" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "value", | ||
| "type": { | ||
| "text": "string | undefined" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "value" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "formaction", | ||
| "type": { | ||
| "text": "ButtonProps['formaction']" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "formaction" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "formenctype", | ||
| "type": { | ||
| "text": "ButtonProps['formenctype']" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "formenctype" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "formmethod", | ||
| "type": { | ||
| "text": "ButtonProps['formmethod']" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "formmethod" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "formnovalidate", | ||
| "type": { | ||
| "text": "ButtonProps['formnovalidate']" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "formnovalidate" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "formtarget", | ||
| "type": { | ||
| "text": "ButtonProps['formtarget']" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "formtarget" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "responsiveSize", | ||
| "type": { | ||
| "text": "ButtonProps['responsiveSize'] | undefined" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "responsiveSize" | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "_simulateNativeButtonClick", | ||
| "privacy": "private", | ||
| "parameters": [ | ||
| { | ||
| "kind": "class", | ||
| "description": "", | ||
| "name": "PieButton", | ||
| "slots": [ | ||
| { | ||
| "description": "The icon slot", | ||
| "name": "icon" | ||
| }, | ||
| { | ||
| "description": "Default slot", | ||
| "name": "" | ||
| } | ||
| ], | ||
| "members": [ | ||
| { | ||
| "kind": "field", | ||
| "name": "size", | ||
| "type": { | ||
| "text": "ButtonProps['size']" | ||
| }, | ||
| "privacy": "public", | ||
| "default": "'large'", | ||
| "attribute": "size" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "type", | ||
| "type": { | ||
| "text": "ButtonProps['type']" | ||
| }, | ||
| "privacy": "public", | ||
| "default": "'submit'", | ||
| "attribute": "type" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "variant", | ||
| "type": { | ||
| "text": "ButtonProps['variant']" | ||
| }, | ||
| "privacy": "public", | ||
| "default": "'secondary'", | ||
| "attribute": "variant" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "iconPlacement", | ||
| "type": { | ||
| "text": "ButtonProps['iconPlacement']" | ||
| }, | ||
| "privacy": "public", | ||
| "default": "'leading'", | ||
| "attribute": "iconPlacement" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "disabled", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "privacy": "public", | ||
| "default": "false", | ||
| "attribute": "disabled" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "isLoading", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "privacy": "public", | ||
| "default": "false", | ||
| "attribute": "isLoading", | ||
| "reflects": true | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "isFullWidth", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "privacy": "public", | ||
| "default": "false", | ||
| "attribute": "isFullWidth" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "isResponsive", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "privacy": "public", | ||
| "default": "false", | ||
| "attribute": "isResponsive" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "name", | ||
| "type": { | ||
| "text": "string | undefined" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "name" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "value", | ||
| "type": { | ||
| "text": "string | undefined" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "value" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "formaction", | ||
| "type": { | ||
| "text": "ButtonProps['formaction']" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "formaction" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "formenctype", | ||
| "type": { | ||
| "text": "ButtonProps['formenctype']" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "formenctype" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "formmethod", | ||
| "type": { | ||
| "text": "ButtonProps['formmethod']" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "formmethod" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "formnovalidate", | ||
| "type": { | ||
| "text": "ButtonProps['formnovalidate']" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "formnovalidate" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "formtarget", | ||
| "type": { | ||
| "text": "ButtonProps['formtarget']" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "formtarget" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "responsiveSize", | ||
| "type": { | ||
| "text": "ButtonProps['responsiveSize'] | undefined" | ||
| }, | ||
| "privacy": "public", | ||
| "attribute": "responsiveSize" | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "_simulateNativeButtonClick", | ||
| "privacy": "private", | ||
| "parameters": [ | ||
| { | ||
| "name": "btnType", | ||
| "type": { | ||
| "text": "'submit' | 'reset'" | ||
| } | ||
| } | ||
| ], | ||
| "description": "This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.\nThis is done so that we trigger native form actions, such as submit and reset in the browser. The performance impact of adding and removing a single button to the DOM\nshould be neglible, however this should be monitored.\nThis is the only viable way of guaranteeing native button behaviour when using a web component in place of an actual HTML button.\n\nTODO: if we need to repeat this logic elsewhere, then we should consider moving this code to a shared class or mixin." | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "_handleClick", | ||
| "privacy": "private" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "_handleFormKeyDown", | ||
| "privacy": "private" | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "renderSpinner", | ||
| "privacy": "private", | ||
| "return": { | ||
| "type": { | ||
| "text": "TemplateResult" | ||
| } | ||
| }, | ||
| "description": "Template for the loading state" | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "focus" | ||
| } | ||
| ], | ||
| "attributes": [ | ||
| { | ||
| "name": "size", | ||
| "type": { | ||
| "text": "ButtonProps['size']" | ||
| }, | ||
| "default": "'large'", | ||
| "fieldName": "size" | ||
| }, | ||
| { | ||
| "name": "type", | ||
| "type": { | ||
| "text": "ButtonProps['type']" | ||
| }, | ||
| "default": "'submit'", | ||
| "fieldName": "type" | ||
| }, | ||
| { | ||
| "name": "variant", | ||
| "type": { | ||
| "text": "ButtonProps['variant']" | ||
| }, | ||
| "default": "'secondary'", | ||
| "fieldName": "variant" | ||
| }, | ||
| { | ||
| "name": "iconPlacement", | ||
| "type": { | ||
| "text": "ButtonProps['iconPlacement']" | ||
| }, | ||
| "default": "'leading'", | ||
| "fieldName": "iconPlacement" | ||
| }, | ||
| { | ||
| "name": "disabled", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "default": "false", | ||
| "fieldName": "disabled" | ||
| }, | ||
| { | ||
| "name": "isLoading", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "default": "false", | ||
| "fieldName": "isLoading" | ||
| }, | ||
| { | ||
| "name": "isFullWidth", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "default": "false", | ||
| "fieldName": "isFullWidth" | ||
| }, | ||
| { | ||
| "name": "isResponsive", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "default": "false", | ||
| "fieldName": "isResponsive" | ||
| }, | ||
| { | ||
| "name": "name", | ||
| "type": { | ||
| "text": "string | undefined" | ||
| }, | ||
| "fieldName": "name" | ||
| }, | ||
| { | ||
| "name": "value", | ||
| "type": { | ||
| "text": "string | undefined" | ||
| }, | ||
| "fieldName": "value" | ||
| }, | ||
| { | ||
| "name": "formaction", | ||
| "type": { | ||
| "text": "ButtonProps['formaction']" | ||
| }, | ||
| "fieldName": "formaction" | ||
| }, | ||
| { | ||
| "name": "formenctype", | ||
| "type": { | ||
| "text": "ButtonProps['formenctype']" | ||
| }, | ||
| "fieldName": "formenctype" | ||
| }, | ||
| { | ||
| "name": "formmethod", | ||
| "type": { | ||
| "text": "ButtonProps['formmethod']" | ||
| }, | ||
| "fieldName": "formmethod" | ||
| }, | ||
| { | ||
| "name": "formnovalidate", | ||
| "type": { | ||
| "text": "ButtonProps['formnovalidate']" | ||
| }, | ||
| "fieldName": "formnovalidate" | ||
| }, | ||
| { | ||
| "name": "formtarget", | ||
| "type": { | ||
| "text": "ButtonProps['formtarget']" | ||
| }, | ||
| "fieldName": "formtarget" | ||
| }, | ||
| { | ||
| "name": "responsiveSize", | ||
| "type": { | ||
| "text": "ButtonProps['responsiveSize'] | undefined" | ||
| }, | ||
| "fieldName": "responsiveSize" | ||
| } | ||
| ], | ||
| "mixins": [ | ||
| { | ||
| "name": "FormControlMixin", | ||
| "package": "@justeattakeaway/pie-webc-core" | ||
| } | ||
| ], | ||
| "superclass": { | ||
| "name": "LitElement", | ||
| "package": "lit" | ||
| }, | ||
| "tagName": "pie-button", | ||
| "customElement": true | ||
| "name": "btnType", | ||
| "type": { | ||
| "text": "'submit' | 'reset'" | ||
| } | ||
| } | ||
| ], | ||
| "exports": [ | ||
| { | ||
| "kind": "js", | ||
| "name": "*", | ||
| "declaration": { | ||
| "name": "*", | ||
| "package": "./defs" | ||
| } | ||
| }, | ||
| { | ||
| "kind": "js", | ||
| "name": "PieButton", | ||
| "declaration": { | ||
| "name": "PieButton", | ||
| "module": "src/index.js" | ||
| } | ||
| ], | ||
| "description": "This method creates an invisible button of the same type as pie-button. It is then clicked, and immediately removed from the DOM.\r\nThis is done so that we trigger native form actions, such as submit and reset in the browser. The performance impact of adding and removing a single button to the DOM\r\nshould be neglible, however this should be monitored.\r\nThis is the only viable way of guaranteeing native button behaviour when using a web component in place of an actual HTML button.\r\n\r\nTODO: if we need to repeat this logic elsewhere, then we should consider moving this code to a shared class or mixin." | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "_handleClick", | ||
| "privacy": "private" | ||
| }, | ||
| { | ||
| "kind": "field", | ||
| "name": "_handleFormKeyDown", | ||
| "privacy": "private" | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "renderSpinner", | ||
| "privacy": "private", | ||
| "return": { | ||
| "type": { | ||
| "text": "TemplateResult" | ||
| } | ||
| ] | ||
| }, | ||
| "description": "Template for the loading state" | ||
| }, | ||
| { | ||
| "kind": "method", | ||
| "name": "focus" | ||
| } | ||
| ], | ||
| "attributes": [ | ||
| { | ||
| "name": "size", | ||
| "type": { | ||
| "text": "ButtonProps['size']" | ||
| }, | ||
| "default": "'medium'", | ||
| "fieldName": "size" | ||
| }, | ||
| { | ||
| "name": "type", | ||
| "type": { | ||
| "text": "ButtonProps['type']" | ||
| }, | ||
| "default": "'submit'", | ||
| "fieldName": "type" | ||
| }, | ||
| { | ||
| "name": "variant", | ||
| "type": { | ||
| "text": "ButtonProps['variant']" | ||
| }, | ||
| "default": "'primary'", | ||
| "fieldName": "variant" | ||
| }, | ||
| { | ||
| "name": "iconPlacement", | ||
| "type": { | ||
| "text": "ButtonProps['iconPlacement']" | ||
| }, | ||
| "default": "'leading'", | ||
| "fieldName": "iconPlacement" | ||
| }, | ||
| { | ||
| "name": "disabled", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "default": "false", | ||
| "fieldName": "disabled" | ||
| }, | ||
| { | ||
| "name": "isLoading", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "default": "false", | ||
| "fieldName": "isLoading" | ||
| }, | ||
| { | ||
| "name": "isFullWidth", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "default": "false", | ||
| "fieldName": "isFullWidth" | ||
| }, | ||
| { | ||
| "name": "isResponsive", | ||
| "type": { | ||
| "text": "boolean" | ||
| }, | ||
| "default": "false", | ||
| "fieldName": "isResponsive" | ||
| }, | ||
| { | ||
| "name": "name", | ||
| "type": { | ||
| "text": "string | undefined" | ||
| }, | ||
| "fieldName": "name" | ||
| }, | ||
| { | ||
| "name": "value", | ||
| "type": { | ||
| "text": "string | undefined" | ||
| }, | ||
| "fieldName": "value" | ||
| }, | ||
| { | ||
| "name": "formaction", | ||
| "type": { | ||
| "text": "ButtonProps['formaction']" | ||
| }, | ||
| "fieldName": "formaction" | ||
| }, | ||
| { | ||
| "name": "formenctype", | ||
| "type": { | ||
| "text": "ButtonProps['formenctype']" | ||
| }, | ||
| "fieldName": "formenctype" | ||
| }, | ||
| { | ||
| "name": "formmethod", | ||
| "type": { | ||
| "text": "ButtonProps['formmethod']" | ||
| }, | ||
| "fieldName": "formmethod" | ||
| }, | ||
| { | ||
| "name": "formnovalidate", | ||
| "type": { | ||
| "text": "ButtonProps['formnovalidate']" | ||
| }, | ||
| "fieldName": "formnovalidate" | ||
| }, | ||
| { | ||
| "name": "formtarget", | ||
| "type": { | ||
| "text": "ButtonProps['formtarget']" | ||
| }, | ||
| "fieldName": "formtarget" | ||
| }, | ||
| { | ||
| "name": "responsiveSize", | ||
| "type": { | ||
| "text": "ButtonProps['responsiveSize'] | undefined" | ||
| }, | ||
| "fieldName": "responsiveSize" | ||
| } | ||
| ], | ||
| "mixins": [ | ||
| { | ||
| "name": "FormControlMixin", | ||
| "package": "@justeattakeaway/pie-webc-core" | ||
| } | ||
| ], | ||
| "superclass": { | ||
| "name": "LitElement", | ||
| "package": "lit" | ||
| }, | ||
| "tagName": "pie-button", | ||
| "customElement": true | ||
| } | ||
| ], | ||
| "exports": [ | ||
| { | ||
| "kind": "js", | ||
| "name": "*", | ||
| "declaration": { | ||
| "name": "*", | ||
| "package": "./defs" | ||
| } | ||
| }, | ||
| { | ||
| "kind": "javascript-module", | ||
| "path": "src/defs-react.js", | ||
| "declarations": [], | ||
| "exports": [] | ||
| "kind": "js", | ||
| "name": "PieButton", | ||
| "declaration": { | ||
| "name": "PieButton", | ||
| "module": "src/index.js" | ||
| } | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
| } |
@@ -16,3 +16,3 @@ import { LitElement as zt, html as N, nothing as B, unsafeCSS as Ct } from "lit"; | ||
| "destructive-ghost" | ||
| ], Vt = ["leading", "trailing"], Kt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Ut = ["post", "get", "dialog"], qt = ["_self", "_blank", "_parent", "_top"], Nt = `*,*:before,*:after{box-sizing:border-box}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-m-family);--btn-font-weight: var(--dt-font-interactive-m-weight);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-height--xsmall: 32px;--btn-height--small: 40px;--btn-height--medium: 48px;--btn-height--large: 56px;--icon-display-override: block;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;box-sizing:border-box;height:var(--btn-height);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;-webkit-user-select:none;user-select:none;inline-size:var(--btn-inline-size)}.o-btn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn[variant=primary]:active:not(:disabled),.o-btn[variant=primary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn[variant=primary][size=xsmall],.o-btn[variant=primary][size=small-productive]{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn[variant=primary][size=xsmall]:hover:not(:disabled),.o-btn[variant=primary][size=small-productive]:hover:not(:disabled){--hover-modifier: var(--dt-color-hover-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=xsmall][isLoading]:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled),.o-btn[variant=primary][size=small-productive][isLoading]:not(:disabled){--active-modifier: var(--dt-color-active-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-btn[variant=outline]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn[variant=ghost-inverse],.o-btn[variant=outline-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled),.o-btn[variant=outline-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled),.o-btn[variant=outline-inverse]:active:not(:disabled),.o-btn[variant=outline-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn[variant=outline-inverse]:not([disabled]){border:1px solid var(--dt-color-border-strong)}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=destructive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn[variant=destructive-ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[isFullWidth]{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost],[variant=ghost-inverse],[variant=destructive-ghost]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=xsmall]{--btn-height: var(--btn-height--xsmall);--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--icon-size-override: 16px}@media (min-width: 768px){.o-btn[size=xsmall][isResponsive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}.o-btn[size=xsmall][isResponsive][responsiveSize=expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}}.o-btn[size=small-expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 768px){.o-btn[size=small-expressive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=small-productive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 768px){.o-btn[size=small-productive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=medium]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}@media (min-width: 768px){.o-btn[size=medium][isResponsive]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=large]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}.o-btn[isLoading]>*:not(pie-spinner){visibility:hidden}.o-btn[isLoading] pie-spinner{position:absolute}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){height:var(--icon-size-override);width:var(--icon-size-override)} | ||
| ], Vt = ["leading", "trailing"], Kt = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Ut = ["post", "get", "dialog"], qt = ["_self", "_blank", "_parent", "_top"], Nt = `*,*:after,*:before{box-sizing:inherit}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-m-family);--btn-font-weight: var(--dt-font-interactive-m-weight);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-height--xsmall: 32px;--btn-height--small: 40px;--btn-height--medium: 48px;--btn-height--large: 56px;--icon-display-override: block;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;height:var(--btn-height);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;-webkit-user-select:none;user-select:none;inline-size:var(--btn-inline-size)}.o-btn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn[variant=primary]:active:not(:disabled),.o-btn[variant=primary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn[variant=primary][size=xsmall],.o-btn[variant=primary][size=small-productive]{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn[variant=primary][size=xsmall]:hover:not(:disabled),.o-btn[variant=primary][size=small-productive]:hover:not(:disabled){--hover-modifier: var(--dt-color-hover-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=xsmall][isLoading]:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled),.o-btn[variant=primary][size=small-productive][isLoading]:not(:disabled){--active-modifier: var(--dt-color-active-02);--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-btn[variant=outline]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong)}.o-btn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link)}.o-btn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary)}.o-btn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn[variant=ghost-inverse],.o-btn[variant=outline-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled),.o-btn[variant=outline-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled),.o-btn[variant=outline-inverse]:active:not(:disabled),.o-btn[variant=outline-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn[variant=outline-inverse]:not([disabled]){border:1px solid var(--dt-color-border-strong)}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=destructive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error)}.o-btn[variant=destructive-ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[isFullWidth]{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost],[variant=ghost-inverse],[variant=destructive-ghost]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=xsmall]{--btn-height: var(--btn-height--xsmall);--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--icon-size-override: 16px}@media (min-width: 768px){.o-btn[size=xsmall][isResponsive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}.o-btn[size=xsmall][isResponsive][responsiveSize=expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}}.o-btn[size=small-expressive]{--btn-height: var(--btn-height--small);--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 768px){.o-btn[size=small-expressive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=small-productive]{--btn-height: var(--btn-height--small);--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--icon-size-override: 20px}@media (min-width: 768px){.o-btn[size=small-productive][isResponsive]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=medium]{--btn-height: var(--btn-height--medium);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}@media (min-width: 768px){.o-btn[size=medium][isResponsive]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}}.o-btn[size=large]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--icon-size-override: 24px}.o-btn[isLoading]>*:not(pie-spinner){visibility:hidden}.o-btn[isLoading] pie-spinner{position:absolute}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){height:var(--icon-size-override);width:var(--icon-size-override)} | ||
| `; | ||
@@ -505,3 +505,3 @@ (function() { | ||
| constructor() { | ||
| super(...arguments), this.size = "large", this.type = "submit", this.variant = "secondary", this.iconPlacement = "leading", this.disabled = !1, this.isLoading = !1, this.isFullWidth = !1, this.isResponsive = !1, this._handleFormKeyDown = (a) => { | ||
| super(...arguments), this.size = "medium", this.type = "submit", this.variant = "primary", this.iconPlacement = "leading", this.disabled = !1, this.isLoading = !1, this.isFullWidth = !1, this.isResponsive = !1, this._handleFormKeyDown = (a) => { | ||
| if (!(a.key !== "Enter" || this.type !== "submit" || this.disabled)) { | ||
@@ -598,3 +598,3 @@ if (a.target instanceof HTMLElement) { | ||
| m(), | ||
| P(C, At, "large") | ||
| P(C, At, "medium") | ||
| ], v.prototype, "size", 2); | ||
@@ -607,3 +607,3 @@ p([ | ||
| m(), | ||
| P(C, Tt, "secondary") | ||
| P(C, Tt, "primary") | ||
| ], v.prototype, "variant", 2); | ||
@@ -610,0 +610,0 @@ p([ |
| { | ||
| "name": "@justeattakeaway/pie-button", | ||
| "version": "0.0.0-snapshot-release-20240209144253", | ||
| "version": "0.0.0-snapshot-release-20240229152723", | ||
| "description": "PIE design system button built using web components", | ||
@@ -47,6 +47,6 @@ "type": "module", | ||
| "dependencies": { | ||
| "@justeattakeaway/pie-spinner": "0.5.2", | ||
| "@justeattakeaway/pie-webc-core": "0.17.1", | ||
| "@justeattakeaway/pie-spinner": "0.0.0-snapshot-release-20240229152723", | ||
| "@justeattakeaway/pie-webc-core": "0.19.0", | ||
| "element-internals-polyfill": "1.3.10" | ||
| } | ||
| } |
@@ -55,4 +55,4 @@ import { | ||
| @property() | ||
| @validPropertyValues(componentSelector, sizes, 'large') | ||
| public size: ButtonProps['size'] = 'large'; | ||
| @validPropertyValues(componentSelector, sizes, 'medium') | ||
| public size: ButtonProps['size'] = 'medium'; | ||
@@ -64,4 +64,4 @@ @property() | ||
| @property() | ||
| @validPropertyValues(componentSelector, variants, 'secondary') | ||
| public variant: ButtonProps['variant'] = 'secondary'; | ||
| @validPropertyValues(componentSelector, variants, 'primary') | ||
| public variant: ButtonProps['variant'] = 'primary'; | ||
@@ -68,0 +68,0 @@ @property({ type: String }) |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by0.05%
1862
Worsened metrics
- Total package byte prevSize
- decreased by-6.24%
94153
Dependency changes
+ Added@justeattakeaway/pie-spinner@0.0.0-snapshot-release-20240229152723(transitive)
+ Added@justeattakeaway/pie-webc-core@0.19.0(transitive)
- Removed@justeattakeaway/pie-spinner@0.5.2(transitive)
- Removed@justeattakeaway/pie-webc-core@0.17.1(transitive)
Updated@justeattakeaway/pie-spinner@0.0.0-snapshot-release-20240229152723