carbon-custom-elements
Version:
A Carbon Design System variant that's as easy to use as native HTML elements, with no framework tax, no framework silo.
1 lines • 5.12 kB
Source Map (JSON)
{"version":3,"sources":["components/progress-indicator/progress-step.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAsC,UAAU,EAAE,MAAM,aAAa,CAAC;AAU7E;;GAEG;AACH,oBAAY,kBAAkB;IAC5B;;OAEG;IACH,MAAM,WAAW;IAEjB;;OAEG;IACH,OAAO,YAAY;IAEnB;;OAEG;IACH,QAAQ,aAAa;IAErB;;OAEG;IACH,OAAO,YAAY;CACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BD;;;;GAIG;AACH,cACM,cAAe,SAAQ,mBAAsB;IACjD;;OAEG;IAEH,QAAQ,UAAS;IAEjB;;OAEG;IAEH,SAAS,EAAG,MAAM,CAAC;IAEnB;;OAEG;IAEH,SAAS,EAAG,MAAM,CAAC;IAEnB;;OAEG;IAEH,kBAAkB,EAAG,MAAM,CAAC;IAE5B;;OAEG;IAEH,KAAK,qBAA6B;IAElC;;;OAGG;IAEH,QAAQ,UAAS;IAEjB,gBAAgB;IAIhB,iBAAiB;IAOjB,OAAO,CAAC,iBAAiB,KAAA;IAMzB,MAAM;IAuBN,MAAM,CAAC,MAAM,MAAU;CACxB;AAED,eAAe,cAAc,CAAC","file":"progress-step.d.ts","sourcesContent":["/**\n * @license\n *\n * Copyright IBM Corp. 2019, 2020\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { SVGTemplateResult } from 'lit-html';\nimport { html, svg, property, customElement, LitElement } from 'lit-element';\nimport CheckmarkOutline16 from '@carbon/icons/lib/checkmark--outline/16';\nimport Warning16 from '@carbon/icons/lib/warning/16';\nimport settings from 'carbon-components/es/globals/js/settings';\nimport spread from '../../globals/directives/spread';\nimport FocusMixin from '../../globals/mixins/focus';\nimport styles from './progress-indicator.scss';\n\nconst { prefix } = settings;\n\n/**\n * State of progress step.\n */\nexport enum PROGRESS_STEP_STAT {\n /**\n * One for future execution.\n */\n QUEUED = 'queued',\n\n /**\n * One that is being executed now.\n */\n CURRENT = 'current',\n\n /**\n * Complete one.\n */\n COMPLETE = 'complete',\n\n /**\n * Invalid one.\n */\n INVALID = 'invalid',\n}\n\n/**\n * Icons, keyed by state.\n */\nconst icons = {\n [PROGRESS_STEP_STAT.QUEUED]: ({\n children,\n attrs = {},\n }: { children?: SVGTemplateResult; attrs?: { [key: string]: string } } = {}) =>\n svg`\n <svg ...=\"${spread(attrs)}\">\n ${children}\n <path d=\"M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z\" />\n </svg>\n `,\n [PROGRESS_STEP_STAT.CURRENT]: ({\n children,\n attrs = {},\n }: { children?: SVGTemplateResult; attrs?: { [key: string]: string } } = {}) =>\n svg`\n <svg ...=\"${spread(attrs)}\">\n ${children}\n <path d=\"M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0\" />\n </svg>\n `,\n [PROGRESS_STEP_STAT.COMPLETE]: CheckmarkOutline16,\n [PROGRESS_STEP_STAT.INVALID]: Warning16,\n};\n\n/**\n * Progress step.\n * @element bx-progress-step\n * @slot secondary-label-text - The secondary progress label.\n */\n@customElement(`${prefix}-progress-step`)\nclass BXProgressStep extends FocusMixin(LitElement) {\n /**\n * `true` if the progress step should be disabled.\n */\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /**\n * The a11y text for the icon.\n */\n @property({ attribute: 'icon-label' })\n iconLabel!: string;\n\n /**\n * The primary progress label.\n */\n @property({ attribute: 'label-text' })\n labelText!: string;\n\n /**\n * The secondary progress label.\n */\n @property({ attribute: 'secondary-label-text' })\n secondaryLabelText!: string;\n\n /**\n * The progress state.\n */\n @property()\n state = PROGRESS_STEP_STAT.QUEUED;\n\n /**\n * `true` if the progress step should be vertical.\n * @private\n */\n @property({ type: Boolean, reflect: true })\n vertical = false;\n\n createRenderRoot() {\n return this.attachShadow({ mode: 'open', delegatesFocus: true });\n }\n\n connectedCallback() {\n if (!this.hasAttribute('role')) {\n this.setAttribute('role', 'listitem');\n }\n super.connectedCallback();\n }\n\n updated(changedProperties) {\n if (changedProperties.has('disabled')) {\n this.setAttribute('aria-disabled', String(Boolean(this.disabled)));\n }\n }\n\n render() {\n const { iconLabel, labelText, secondaryLabelText, state } = this;\n return html`\n ${icons[state]({\n class: {\n [PROGRESS_STEP_STAT.INVALID]: `${prefix}--progress__warning`,\n }[state],\n children: !iconLabel ? undefined : svg`<title>${iconLabel}</title>`,\n })}\n <slot>\n <p role=\"button\" class=\"${prefix}--progress-label\" tabindex=\"0\" aria-describedby=\"label-tooltip\">${labelText}</p>\n </slot>\n <slot name=\"secondary-label-text\">\n ${!secondaryLabelText\n ? undefined\n : html`\n <p class=\"${prefix}--progress-optional\">${secondaryLabelText}</p>\n `}\n </slot>\n <span class=\"${prefix}--progress-line\"></span>\n `;\n }\n\n static styles = styles;\n}\n\nexport default BXProgressStep;\n"]}