From df727e3701eeda2500836457b8cfbd6682505d54 Mon Sep 17 00:00:00 2001 From: rmenner Date: Wed, 4 Dec 2024 18:54:33 -0500 Subject: [PATCH] feat: counter component initial setup #54 --- components/counter/.stylelintrc.json | 3 + components/counter/apiExamples/basic.html | 3 + components/counter/demo/api.html | 52 + components/counter/demo/api.js | 16 + components/counter/demo/api.md | 1053 +++++++++++++++++ components/counter/demo/api.min.js | 63 + components/counter/demo/index.html | 52 + components/counter/demo/index.js | 22 + components/counter/demo/index.md | 12 + components/counter/demo/index.min.js | 67 ++ components/counter/docs/api.md | 57 + components/counter/docs/design-notes.md | 9 + components/counter/docs/figma.md | 5 + components/counter/docs/partials/api.md | 28 + .../counter/docs/partials/description.md | 1 + components/counter/docs/partials/index.md | 12 + .../counter/docs/partials/readmeAddlInfo.md | 1 + components/counter/docs/partials/useCases.md | 5 + components/counter/docs/upstream.md | 80 ++ components/counter/eslint.config.mjs | 5 + components/counter/package.json | 50 + components/counter/src/auro-counter.js | 23 + components/counter/src/auro-countergroup.js | 42 + components/counter/src/index.js | 3 + components/counter/src/scripts/version.mjs | 3 + .../counter/src/styles/countergroup.scss | 17 + components/counter/src/styles/style.scss | 17 + components/counter/tsconfig.json | 16 + components/counter/web-dev-server.config.js | 6 + 29 files changed, 1723 insertions(+) create mode 100644 components/counter/.stylelintrc.json create mode 100644 components/counter/apiExamples/basic.html create mode 100644 components/counter/demo/api.html create mode 100644 components/counter/demo/api.js create mode 100644 components/counter/demo/api.md create mode 100644 components/counter/demo/api.min.js create mode 100644 components/counter/demo/index.html create mode 100644 components/counter/demo/index.js create mode 100644 components/counter/demo/index.md create mode 100644 components/counter/demo/index.min.js create mode 100644 components/counter/docs/api.md create mode 100644 components/counter/docs/design-notes.md create mode 100644 components/counter/docs/figma.md create mode 100644 components/counter/docs/partials/api.md create mode 100644 components/counter/docs/partials/description.md create mode 100644 components/counter/docs/partials/index.md create mode 100644 components/counter/docs/partials/readmeAddlInfo.md create mode 100644 components/counter/docs/partials/useCases.md create mode 100644 components/counter/docs/upstream.md create mode 100644 components/counter/eslint.config.mjs create mode 100644 components/counter/package.json create mode 100644 components/counter/src/auro-counter.js create mode 100644 components/counter/src/auro-countergroup.js create mode 100644 components/counter/src/index.js create mode 100644 components/counter/src/scripts/version.mjs create mode 100644 components/counter/src/styles/countergroup.scss create mode 100644 components/counter/src/styles/style.scss create mode 100644 components/counter/tsconfig.json create mode 100644 components/counter/web-dev-server.config.js diff --git a/components/counter/.stylelintrc.json b/components/counter/.stylelintrc.json new file mode 100644 index 00000000..7675ef8e --- /dev/null +++ b/components/counter/.stylelintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "@auro-formkit/config/stylelint" +} \ No newline at end of file diff --git a/components/counter/apiExamples/basic.html b/components/counter/apiExamples/basic.html new file mode 100644 index 00000000..c0d95305 --- /dev/null +++ b/components/counter/apiExamples/basic.html @@ -0,0 +1,3 @@ + + Lorem ipsum solar + diff --git a/components/counter/demo/api.html b/components/counter/demo/api.html new file mode 100644 index 00000000..784d6630 --- /dev/null +++ b/components/counter/demo/api.html @@ -0,0 +1,52 @@ + + + + + + + + Auro Web Component Generator | auro-counter custom element + + + + + + +
+ + + + + + + + diff --git a/components/counter/demo/api.js b/components/counter/demo/api.js new file mode 100644 index 00000000..cc38dfc3 --- /dev/null +++ b/components/counter/demo/api.js @@ -0,0 +1,16 @@ +/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers */ +import '../src/index.js'; + +export function initExamples(initialCount = 0) { + try { + // javascript example function calls to be added here upon creation to test examples + + } catch (err) { + if (initialCount <= 20) { + // setTimeout handles issue where content is sometimes loaded after the functions get called + setTimeout(() => { + initExamples(initialCount + 1); + }, 100); + } + } +} diff --git a/components/counter/demo/api.md b/components/counter/demo/api.md new file mode 100644 index 00000000..b714b1ff --- /dev/null +++ b/components/counter/demo/api.md @@ -0,0 +1,1053 @@ + + + +# auro-counter + +## Attributes + +| Attribute | Type | Description | +|--------------------|-------------|--------------------------------------------------| +| [disableEventShow](#disableEventShow) | ` Boolean ` | If declared, the dropdown will only show by calling the API .show() public method. | + +## Properties + +| Property | Attribute | Type | Default | Description | +|-------------------------|-------------------------|-------------|---------|--------------------------------------------------| +| [bordered](#bordered) | `bordered` | ` Boolean ` | | If declared, applies a border around the trigger slot. | +| [chevron](#chevron) | `chevron` | ` Boolean ` | | If declared, the dropdown displays an display state chevron on the right. | +| [disabled](#disabled) | `disabled` | ` Boolean ` | | If declared, the dropdown is not interactive. | +| [error](#error) | `error` | ` Boolean ` | | If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. | +| [inset](#inset) | `inset` | ` Boolean ` | | If declared, will apply padding around trigger slot content. | +| [isPopoverVisible](#isPopoverVisible) | `isPopoverVisible` | ` Boolean ` | false | If true, the dropdown bib is displayed. | +| [matchWidth](#matchWidth) | `matchWidth` | ` Boolean ` | false | If declared, the popover and trigger will be set to the same width. | +| [noHideOnThisFocusLoss](#noHideOnThisFocusLoss) | `noHideOnThisFocusLoss` | ` Boolean ` | false | If delclared, the dropdown will not hide when moving focus outside the element. | +| [noToggle](#noToggle) | `noToggle` | ` Boolean ` | | If declared, the trigger will only show the the dropdown bib. | +| [ready](#ready) | `ready` | ` Boolean ` | | When false the component API should not be called. | +| [rounded](#rounded) | `rounded` | ` Boolean ` | | If declared, will apply border-radius to trigger and default slots. | + +## Methods + +| Method | Type | Description | +|--------|------------|-----------------------------| +| [hide](#hide) | `(): void` | Hides the dropdown content. | +| [show](#show) | `(): void` | Shows the dropdown content. | + +## Events + +| Event | Type | Description | +|-----------------------------|---------------------------------------|--------------------------------------------------| +| `auroDropdown-ready` | `CustomEvent` | Notifies that the component has finished initializing. | +| `auroDropdown-toggled` | `CustomEvent<{ expanded: boolean; }>` | Notifies that the visibility of the dropdown bib has changed. | +| `auroDropdown-triggerClick` | `CustomEvent` | Notifies that the trigger has been clicked. | +| [dropdownToggled](#dropdownToggled) | `CustomEvent<{ expanded: boolean; }>` | (DEPRECATED) Notifies that the visibility of the dropdown bib has changed. | + +## Slots + +| Name | Description | +|------------|---------------------------------------| +| | Default slot for the popover content. | +| [helpText](#helpText) | Defines the content of the helpText. | +| [label](#label) | Defines the content of the label. | +| [trigger](#trigger) | Defines the content of the trigger. | + +## CSS Shadow Parts + +| Part | Description | +|------------|----------------------------------------------| +| [chevron](#chevron) | The collapsed/expanded state icon container. | +| [helpText](#helpText) | The helpText content container. | +| [popover](#popover) | The bib content container. | +| [trigger](#trigger) | The trigger content container. | + + +## API Examples + +### Basic + +The most basic, simple version of auro-drodown. + +
+ + + + Lorem ipsum solar +
+ Trigger +
+ + +
+ + See code + + + +```html + + Lorem ipsum solar +
+ Trigger +
+ +``` + + +
+ + + + Lorem ipsum solar +
+ +
+ + +
+ + See code + + + +```html + + Lorem ipsum solar +
+ +
+ +``` + + +
+ + + + Lorem ipsum solar +
+ + Dropdown + +
+ + +
+ + See code + + + +```html + + Lorem ipsum solar +
+ + Dropdown + +
+ +``` + + +
+ + + + Lorem ipsum solar +
+ + +
+ + +
+ + See code + + + +```html + + Lorem ipsum solar +
+ + +
+ +``` + + + +### Property Examples + +#### bordered + +Adds the border style around the dropdown trigger. + +
+ + + + Lorem ipsum solar +
+ Trigger +
+ + +
+ + See code + + + +```html + + Lorem ipsum solar +
+ Trigger +
+ +``` + + + +#### chevron + +Adds the bib visibility state chevron to the right side of the trigger content. + +
+ + + + Lorem ipsum solar +
+ Trigger +
+ + +
+ + See code + + + +```html + + Lorem ipsum solar +
+ Trigger +
+ +``` + + +
+ + + + Lorem ipsum solar +
+ +
+ + +
+ + See code + + + +```html + + Lorem ipsum solar +
+ +
+ +``` + + +
+ + + + Lorem ipsum solar +
+ + Dropdown + +
+ + +
+ + See code + + + +```html + + Lorem ipsum solar +
+ + Dropdown + +
+ +``` + + +
+ + + + Lorem ipsum solar +
+ + +
+ + +
+ + See code + + + +```html + + Lorem ipsum solar +
+ + +
+ +``` + + + +#### disabled + +Disables the trigger preventing the dropdown bib from being shown. + +
+ + + + Lorem ipsum solar +
+ Trigger +
+ + +
+ + See code + + + +```html + + Lorem ipsum solar +
+ Trigger +
+ +``` + + +
+ + + + Lorem ipsum solar +
+ Trigger +
+ + Helper text + + + Name + + + +
+ + See code + + + +```html + + Lorem ipsum solar +
+ Trigger +
+ + Helper text + + + Name + + +``` + + + +#### error + +Adds the error state UI to the trigger. + +
+ + + + Lorem ipsum solar +
+ Trigger +
+ + +
+ + See code + + + +```html + + Lorem ipsum solar +
+ Trigger +
+ +``` + + +
+ + + + Lorem ipsum solar +
+ Trigger +
+ + +
+ + See code + + + +```html + + Lorem ipsum solar +
+ Trigger +
+ +``` + + + +#### inset + +The `inset` property applies a predefined amount of CSS `padding` to the `trigger` slot content. + +
+ + + + Lorem ipsum solar +
+ Trigger +
+ + +
+ + See code + + + +```html + + Lorem ipsum solar +
+ Trigger +
+ +``` + + +
+ + + + Lorem ipsum solar +
+ Trigger +
+ + +
+ + See code + + + +```html + + Lorem ipsum solar +
+ Trigger +
+ +``` + + + +#### rounded + +The `rounded` property applies `border-radius` CSS to the trigger and default slot content. + +
+ + + + Lorem ipsum solar +
+ Trigger +
+ + +
+ + See code + + + +```html + + Lorem ipsum solar +
+ Trigger +
+ +``` + + + +#### noToggle + +In cases where it is desired behavior for `auro-counter` to only show, not toggle, the bib content when activating the trigger the `noToggle` attribute must be applied. + +
+ + + + Lorem ipsum solar +
+ Trigger +
+ + +
+ + See code + + + +```html + + Lorem ipsum solar +
+ Trigger +
+ +``` + + + +### Slot Examples + +#### trigger & default + +All examples shown on this page include default and `trigger` slot content. + +#### label + +Content defined in the `label` slot will be rendered left aligned inside the trigger above all other defined trigger slot content. + +
+ + + + Lorem ipsum solar + Name +
+ Trigger +
+ + +
+ + See code + + + +```html + + Lorem ipsum solar + Name +
+ Trigger +
+ +``` + + + +#### helpText + +Content defined in the `helpText` slot will be rendered left aligned below the trigger. + +
+ + + + Lorem ipsum solar + + Helper text + +
+ Trigger +
+ + +
+ + See code + + + +```html + + Lorem ipsum solar + + Helper text + +
+ Trigger +
+ +``` + + + +##### + +When combined with the `error` property the `helpText` slot content is colored red. + +
+ + + + Lorem ipsum solar + + Helper text + +
+ Trigger +
+ + +
+ + See code + + + +```html + + Lorem ipsum solar + + Helper text + +
+ Trigger +
+ +``` + + + +### Method Examples + +#### show + +The `show` method may also be called from anywhere in your code by executing `document.querySelector('#idOfTheDropdownElement').show()`. This example will execute the `show` method on a `keydown` event with focus in the input element. + +
+ + + + Enter a value to show the dropdown + + +

+ Lorem ipsum solar +

+ Trigger Label + + +
+ + See code + + + +```html + + Enter a value to show the dropdown + + +

+ Lorem ipsum solar +

+ Trigger Label + +``` + + + + +```js +export function showExample() { + const triggerInput = document.querySelector('#showExampleTriggerInput'); + const dropdownElem = document.querySelector('#showMethodExample'); + + triggerInput.addEventListener('keydown', () => { + dropdownElem.show(); + }); +} +``` + + + +#### hide + +The `hide` method can be called from within the default slot content. This is useful for cases such as `auro-select` when the dropdown should be collapsed after making a selection. + +The `hide` method may also be called from anywhere in your code by executing `document.querySelector('#idOfTheDropdownElement').hide()`. + +This example demonstrations collapsing the dropdown by clicking a button within the dropdown bib content. + +
+ + + +

+ Lorem ipsum solar +

+ + Dismiss Dropdown + + + + + +
+ + See code + + + +```html + +

+ Lorem ipsum solar +

+ + Dismiss Dropdown + + + + +``` + + + + +### Other Examples + +#### Width and Sizing Behavior + +##### Width +`auro-counter` will consume all available width of the parent container. `auro-counter` can be made narrower by wrapping it in a container of the desired width. + +##### Dropdown Content Sizing +If the dropdown's content size should not exceed a certain height, you can control it using CSS. Add a `max-height` property and set `overflow: scroll` to enable scrollability for content that exceeds the specified height. + + +
+ + +
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+ Trigger +
+ +
+ +
+ + See code + + + +```html +
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+ Trigger +
+ +
+``` + + + +
+ + +
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+ Trigger +
+ +
+ +
+ + See code + + + +```html +
+ +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+ Trigger +
+ +
+``` + + + +#### Truncated trigger component with fixed width + +`auro-counter` trigger component will be truncated if the text is too long than its container width. + +
+ + +
+ +
+ I really prefer Alaska Airlines for my vacation travels +
+ + Help text + +
+ I really prefer Alaska Airlines for my vacation travels +
+ +
+ +
+ + See code + + + +```html +
+ +
+ I really prefer Alaska Airlines for my vacation travels +
+ + Help text + +
+ I really prefer Alaska Airlines for my vacation travels +
+ +
+``` + + + +### Theme Support + +The component may be restyled using the following code sample and changing the values of the following token(s). + + + + +```scss +:host { + --ds-auro-counter-help-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default); + --ds-auro-counter-label-text-color: var(--ds-color-text-secondary-default, $ds-color-text-secondary-default); + --ds-auro-counter-popover-border-color: transparent; + --ds-auro-counter-popover-boxshadow-color: rgba(0 0 0 / .08); + --ds-auro-counter-popover-container-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default); + --ds-auro-counter-popover-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default); + --ds-auro-counter-trigger-container-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default); + --ds-auro-counter-trigger-border-color: transparent; + --ds-auro-counter-trigger-text-color: var(--ds-color-text-primary-default, $ds-color-text-primary-default); +} +``` + diff --git a/components/counter/demo/api.min.js b/components/counter/demo/api.min.js new file mode 100644 index 00000000..befbd1d9 --- /dev/null +++ b/components/counter/demo/api.min.js @@ -0,0 +1,63 @@ +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const t$1=globalThis,i$3=t$1.trustedTypes,s$1=i$3?i$3.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$2="$lit$",h$1=`lit$${Math.random().toFixed(9).slice(2)}$`,o$3="?"+h$1,n$3=`<${o$3}>`,r$3=document,l$2=()=>r$3.createComment(""),c$2=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$2=Array.isArray,u$2=t=>a$2(t)||"function"==typeof t?.[Symbol.iterator],d$1="[ \t\n\f\r]",f$1=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m=RegExp(`>|${d$1}(?:([^\\s"'>=/]+)(${d$1}*=${d$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$1=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,y$1=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y$1(1),T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r$3.createTreeWalker(r$3,129);function P(t,i){if(!a$2(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$1?s$1.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"":3===i?"":"",c=f$1;for(let i=0;i"===u[0]?(c=r??f$1,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m:'"'===u[3]?g:p$1):c===g||c===p$1?c=m:c===v||c===_?c=f$1:(c=m,r=void 0);const x=c===m&&t[i+1].startsWith("/>")?" ":"";l+=c===f$1?s+n$3:d>=0?(o.push(a),s.slice(0,d)+e$2+s.slice(d)+h$1+x):s+h$1+(-2===d?i:x);}return [P(t,l+(t[s]||"")+(2===i?"":3===i?"":"")),o]};class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C.nextNode())&&d.length0){r.textContent=i$3?i$3.emptyScript:"";for(let i=0;i2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E;}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=S$1(this,t,i,0),o=!c$2(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R(i.insertBefore(l$2(),t),t,void 0,s??{});}return h._$AI(t),h}; + +/** + * @license + * Copyright 2020 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const a$1=Symbol.for(""),o$2=t=>{if(t?.r===a$1)return t?._$litStatic$},l$1=new Map,n$2=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=!1;for(;$new n$1("string"==typeof t?t:t+"",void 0,s),i$2=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$1(o,t,s)},S=(s,o)=>{if(e$1)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$1=e$1?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2(e)})(t):t; + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const{is:i$1,defineProperty:e,getOwnPropertyDescriptor:r$1,getOwnPropertyNames:h,getOwnPropertySymbols:o,getPrototypeOf:n}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f=(t,s)=>!i$1(t,s),y={attribute:!0,type:String,converter:u,reflect:!1,hasChanged:f};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class b extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=y){if(s.state&&(s.attribute=!1),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$1(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??y}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...h(t),...o(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$1(s));}else void 0!==s&&i.push(c$1(s));return i}static _$Eu(t,s){const i=s.attribute;return !1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f)(this[t],s))return;this.P(t,s,i);}!1===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=!0;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=!1,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return !0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}}b.elementStyles=[],b.shadowRootOptions={mode:"open"},b[d("elementProperties")]=new Map,b[d("finalized")]=new Map,p?.({ReactiveElement:b}),(a.reactiveElementVersions??=[]).push("2.0.4"); + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */class r extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return T}}r._$litElement$=!0,r["finalized"]=!0,globalThis.litElementHydrateSupport?.({LitElement:r});const i=globalThis.litElementPolyfillSupport;i?.({LitElement:r});(globalThis.litElementVersions??=[]).push("4.1.1"); + +var styleCss = i$2`:host{position:relative}`; + +// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + + +class AuroCounter extends r { + + static get styles() { + return [styleCss]; + } + + // function that renders the HTML and CSS into the scope of the component + render() { + return u$1` +
+ +
+ `; + } +} + +AuroCounter.register(); + +/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers */ + +function initExamples(initialCount = 0) { +} + +export { initExamples }; diff --git a/components/counter/demo/index.html b/components/counter/demo/index.html new file mode 100644 index 00000000..177bea55 --- /dev/null +++ b/components/counter/demo/index.html @@ -0,0 +1,52 @@ + + + + + + + + Auro Web Component Generator | auro-counter custom element + + + + + + +
+ + + + + + + + diff --git a/components/counter/demo/index.js b/components/counter/demo/index.js new file mode 100644 index 00000000..cafc35d5 --- /dev/null +++ b/components/counter/demo/index.js @@ -0,0 +1,22 @@ +/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */ +// import { AuroDropdownBib } from '../src/auro-dropdownBib.js'; +import { AuroCounter } from '../src/auro-counter.js'; + +// AuroDropdownBib.register(); + +AuroCounter.register(); +AuroCounter.register('custom-dropdown'); + +export function initExamples(initialCount = 0) { + try { + // javascript example function calls to be added here upon creation to test examples + // auroMenuResetExample(); + } catch (err) { + if (initialCount <= 20) { + // setTimeout handles issue where content is sometimes loaded after the functions get called + setTimeout(() => { + initExamples(initialCount + 1); + }, 100); + } + } +} diff --git a/components/counter/demo/index.md b/components/counter/demo/index.md new file mode 100644 index 00000000..c90e24aa --- /dev/null +++ b/components/counter/demo/index.md @@ -0,0 +1,12 @@ + + +# Counter + + + diff --git a/components/counter/demo/index.min.js b/components/counter/demo/index.min.js new file mode 100644 index 00000000..fa55db97 --- /dev/null +++ b/components/counter/demo/index.min.js @@ -0,0 +1,67 @@ +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const t$1=globalThis,i$3=t$1.trustedTypes,s$1=i$3?i$3.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$2="$lit$",h$1=`lit$${Math.random().toFixed(9).slice(2)}$`,o$3="?"+h$1,n$3=`<${o$3}>`,r$3=document,l$2=()=>r$3.createComment(""),c$2=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$2=Array.isArray,u$2=t=>a$2(t)||"function"==typeof t?.[Symbol.iterator],d$1="[ \t\n\f\r]",f$1=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m=RegExp(`>|${d$1}(?:([^\\s"'>=/]+)(${d$1}*=${d$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$1=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,y$1=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y$1(1),T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r$3.createTreeWalker(r$3,129);function P(t,i){if(!a$2(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$1?s$1.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"":3===i?"":"",c=f$1;for(let i=0;i"===u[0]?(c=r??f$1,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m:'"'===u[3]?g:p$1):c===g||c===p$1?c=m:c===v||c===_?c=f$1:(c=m,r=void 0);const x=c===m&&t[i+1].startsWith("/>")?" ":"";l+=c===f$1?s+n$3:d>=0?(o.push(a),s.slice(0,d)+e$2+s.slice(d)+h$1+x):s+h$1+(-2===d?i:x);}return [P(t,l+(t[s]||"")+(2===i?"":3===i?"":"")),o]};class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C.nextNode())&&d.length0){r.textContent=i$3?i$3.emptyScript:"";for(let i=0;i2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=E;}_$AI(t,i=this,s,e){const h=this.strings;let o=!1;if(void 0===h)t=S$1(this,t,i,0),o=!c$2(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new R(i.insertBefore(l$2(),t),t,void 0,s??{});}return h._$AI(t),h}; + +/** + * @license + * Copyright 2020 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */ +const a$1=Symbol.for(""),o$2=t=>{if(t?.r===a$1)return t?._$litStatic$},l$1=new Map,n$2=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=!1;for(;$new n$1("string"==typeof t?t:t+"",void 0,s),i$2=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(!0===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$1(o,t,s)},S=(s,o)=>{if(e$1)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$1=e$1?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2(e)})(t):t; + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */const{is:i$1,defineProperty:e,getOwnPropertyDescriptor:r$1,getOwnPropertyNames:h,getOwnPropertySymbols:o,getPrototypeOf:n}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f=(t,s)=>!i$1(t,s),y={attribute:!0,type:String,converter:u,reflect:!1,hasChanged:f};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;class b extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=y){if(s.state&&(s.attribute=!1),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$1(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??y}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...h(t),...o(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$1(s));}else void 0!==s&&i.push(c$1(s));return i}static _$Eu(t,s){const i=s.attribute;return !1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f)(this[t],s))return;this.P(t,s,i);}!1===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=!0;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=!1,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return !0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}}b.elementStyles=[],b.shadowRootOptions={mode:"open"},b[d("elementProperties")]=new Map,b[d("finalized")]=new Map,p?.({ReactiveElement:b}),(a.reactiveElementVersions??=[]).push("2.0.4"); + +/** + * @license + * Copyright 2017 Google LLC + * SPDX-License-Identifier: BSD-3-Clause + */class r extends b{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return T}}r._$litElement$=!0,r["finalized"]=!0,globalThis.litElementHydrateSupport?.({LitElement:r});const i=globalThis.litElementPolyfillSupport;i?.({LitElement:r});(globalThis.litElementVersions??=[]).push("4.1.1"); + +var styleCss = i$2`:host{position:relative}`; + +// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + + +class AuroCounter extends r { + + static get styles() { + return [styleCss]; + } + + // function that renders the HTML and CSS into the scope of the component + render() { + return u$1` +
+ +
+ `; + } +} + +/* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */ +// import { AuroDropdownBib } from '../src/auro-dropdownBib.js'; + +// AuroDropdownBib.register(); + +AuroCounter.register(); +AuroCounter.register('custom-dropdown'); + +function initExamples(initialCount = 0) { +} + +export { initExamples }; diff --git a/components/counter/docs/api.md b/components/counter/docs/api.md new file mode 100644 index 00000000..a579e07c --- /dev/null +++ b/components/counter/docs/api.md @@ -0,0 +1,57 @@ +# auro-counter + +## Attributes + +| Attribute | Type | Description | +|--------------------|-------------|--------------------------------------------------| +| `disableEventShow` | ` Boolean ` | If declared, the dropdown will only show by calling the API .show() public method. | + +## Properties + +| Property | Attribute | Type | Default | Description | +|-------------------------|-------------------------|-------------|---------|--------------------------------------------------| +| `bordered` | `bordered` | ` Boolean ` | | If declared, applies a border around the trigger slot. | +| `chevron` | `chevron` | ` Boolean ` | | If declared, the dropdown displays an display state chevron on the right. | +| `disabled` | `disabled` | ` Boolean ` | | If declared, the dropdown is not interactive. | +| `error` | `error` | ` Boolean ` | | If declared in combination with `bordered` property or `helpText` slot content, will apply red color to both. | +| `inset` | `inset` | ` Boolean ` | | If declared, will apply padding around trigger slot content. | +| `isPopoverVisible` | `isPopoverVisible` | ` Boolean ` | false | If true, the dropdown bib is displayed. | +| `matchWidth` | `matchWidth` | ` Boolean ` | false | If declared, the popover and trigger will be set to the same width. | +| `noHideOnThisFocusLoss` | `noHideOnThisFocusLoss` | ` Boolean ` | false | If delclared, the dropdown will not hide when moving focus outside the element. | +| `noToggle` | `noToggle` | ` Boolean ` | | If declared, the trigger will only show the the dropdown bib. | +| `ready` | `ready` | ` Boolean ` | | When false the component API should not be called. | +| `rounded` | `rounded` | ` Boolean ` | | If declared, will apply border-radius to trigger and default slots. | + +## Methods + +| Method | Type | Description | +|--------|------------|-----------------------------| +| `hide` | `(): void` | Hides the dropdown content. | +| `show` | `(): void` | Shows the dropdown content. | + +## Events + +| Event | Type | Description | +|-----------------------------|---------------------------------------|--------------------------------------------------| +| `auroDropdown-ready` | `CustomEvent` | Notifies that the component has finished initializing. | +| `auroDropdown-toggled` | `CustomEvent<{ expanded: boolean; }>` | Notifies that the visibility of the dropdown bib has changed. | +| `auroDropdown-triggerClick` | `CustomEvent` | Notifies that the trigger has been clicked. | +| `dropdownToggled` | `CustomEvent<{ expanded: boolean; }>` | (DEPRECATED) Notifies that the visibility of the dropdown bib has changed. | + +## Slots + +| Name | Description | +|------------|---------------------------------------| +| | Default slot for the popover content. | +| `helpText` | Defines the content of the helpText. | +| `label` | Defines the content of the label. | +| `trigger` | Defines the content of the trigger. | + +## CSS Shadow Parts + +| Part | Description | +|------------|----------------------------------------------| +| `chevron` | The collapsed/expanded state icon container. | +| `helpText` | The helpText content container. | +| `popover` | The bib content container. | +| `trigger` | The trigger content container. | diff --git a/components/counter/docs/design-notes.md b/components/counter/docs/design-notes.md new file mode 100644 index 00000000..fe1f9f02 --- /dev/null +++ b/components/counter/docs/design-notes.md @@ -0,0 +1,9 @@ +## Design releases + +v.1.0 | + +## Overview +auro-counter is a core component.... + +## Features +* add features diff --git a/components/counter/docs/figma.md b/components/counter/docs/figma.md new file mode 100644 index 00000000..d4f90b4f --- /dev/null +++ b/components/counter/docs/figma.md @@ -0,0 +1,5 @@ +# Design specifications + +### Blueprint + + \ No newline at end of file diff --git a/components/counter/docs/partials/api.md b/components/counter/docs/partials/api.md new file mode 100644 index 00000000..c11249fc --- /dev/null +++ b/components/counter/docs/partials/api.md @@ -0,0 +1,28 @@ + + + +## API Examples + +### Basic + +The most basic, simple version of `auro-counter`. + +
+ + +
+ + + See code + + + + + + +### Theme Support + +The component may be restyled using the following code sample and changing the values of the following token(s). + + + diff --git a/components/counter/docs/partials/description.md b/components/counter/docs/partials/description.md new file mode 100644 index 00000000..1a10856a --- /dev/null +++ b/components/counter/docs/partials/description.md @@ -0,0 +1 @@ +The `auro-counter` component is a ui element that enables a way to increment or decrement a single digit value. Common use case such as adding passengers to a flight. diff --git a/components/counter/docs/partials/index.md b/components/counter/docs/partials/index.md new file mode 100644 index 00000000..ff9f9c56 --- /dev/null +++ b/components/counter/docs/partials/index.md @@ -0,0 +1,12 @@ + + +# Counter + + + diff --git a/components/counter/docs/partials/readmeAddlInfo.md b/components/counter/docs/partials/readmeAddlInfo.md new file mode 100644 index 00000000..3fd3b073 --- /dev/null +++ b/components/counter/docs/partials/readmeAddlInfo.md @@ -0,0 +1 @@ + diff --git a/components/counter/docs/partials/useCases.md b/components/counter/docs/partials/useCases.md new file mode 100644 index 00000000..ba309d69 --- /dev/null +++ b/components/counter/docs/partials/useCases.md @@ -0,0 +1,5 @@ +The `auro-counter` element should be used in situations where users may: + +* 1 +* 2 +* 3 diff --git a/components/counter/docs/upstream.md b/components/counter/docs/upstream.md new file mode 100644 index 00000000..804c9e65 --- /dev/null +++ b/components/counter/docs/upstream.md @@ -0,0 +1,80 @@ +# Maintaining your fork's upstream relationship + +So you forked this repo. That's awesome. But don't forget you keep your `main` branch in sync with the upstream `main` branch to ensure that your pull requests will always be able to be merged. + +## How to sync with upstream? + +With a locally cloned repository, you can do this with git with your CLI as follows. + +#### Add upstream + +First you want to verify your current remote config settings. + +```bash +$ git remote -v +``` + +This should return + +```bash +origin https://github.com/[yourUserName]/auro-counter.git (fetch) +origin https://github.com/[yourUserName]/auro-counter.git (push) +``` + +To add the upstream repo to your local forked project + +```bash +$ git remote add upstream https://github.com/AlaskaAirlines/auro-counter.git +``` + +To validate this worked, run the following again + +```bash +$ git remote -v +``` + +``` +origin https://github.com/[yourUserName]/auro-counter.git (fetch) +origin https://github.com/[yourUserName]/auro-counter.git (push) +upstream https://github.com/AlaskaAirlines/auro-counter.git (fetch) +upstream https://github.com/AlaskaAirlines/auro-counter.git (push) +``` + +#### Sync upstream + +To sync your `main` branch with the upstream `main` branch, there are two ways you can do this. The preferred method is to fetch and rebase. Please do not merge down. + +```bash +$ git checkout main + +$ git fetch upstream +$ git rebase upstream/main +``` + +Then to sync your feature brach, + +```bash +$ git checkout feature-branch +$ git rebase main +``` + +#### Brute force + +In the case where your `main` branch's history is not in sync with the upstream, then you have few options. The nuclear option is to trash the fork and re-fork, but there is an easier way. the following step will force reset your `main` branch with that of the upstream `main` branch. + +```bash +$ git reset --hard upstream/main +``` + +Just to make sure that all things are synced correctly, run the following: + +```bash +$ git checkout main + +$ git fetch upstream +$ git merge upstream/main +``` + +## Maintain upstream + +Once you have connected your local forked clone to the upstream repo, maintenance is the key. It is important to ensure that your `main` branch is always updated BEFORE you create a new branch intended to be used with a new pull request. This will help to eliminate any potential issues with merging when the `main` branches are out of sync. diff --git a/components/counter/eslint.config.mjs b/components/counter/eslint.config.mjs new file mode 100644 index 00000000..133be8b4 --- /dev/null +++ b/components/counter/eslint.config.mjs @@ -0,0 +1,5 @@ +import auroConfig from '@auro-formkit/config/eslint'; + +export default [ + ...auroConfig, +]; \ No newline at end of file diff --git a/components/counter/package.json b/components/counter/package.json new file mode 100644 index 00000000..9c112946 --- /dev/null +++ b/components/counter/package.json @@ -0,0 +1,50 @@ +{ + "name": "@auro-formkit/auro-counter", + "version": "3.0.0", + "description": "auro-counter HTML custom element", + "repository": { + "type": "git", + "url": "https://github.com/AlaskaAirlines/auro-counter" + }, + "type": "module", + "main": "dist/index.js", + "module": "dist/index.js", + "types": "dist/index.d.ts", + "license": "Apache-2.0", + "dependencies": { + "chalk": "^5.2.0", + "lit": "^3.2.1" + }, + "peerDependencies": { + "@aurodesignsystem/design-tokens": "^4.9.2", + "@aurodesignsystem/webcorestylesheets": "^5.1.2" + }, + "devDependencies": { + "@auro-formkit/build-tools": "*", + "@auro-formkit/config": "*", + "@auro-formkit/typescript": "*", + "@aurodesignsystem/design-tokens": "^4.9.2", + "@aurodesignsystem/webcorestylesheets": "^5.1.2", + "@rollup/plugin-node-resolve": "^15.3.0", + "postcss-selector-replace": "^1.0.2", + "rollup": "^4.22.4", + "rollup-plugin-serve": "^2.0.2", + "wc-sass-render": "^1.4.0", + "web-component-analyzer": "^2.0.0" + }, + "scripts": { + "build": "run-s build:sass bundler types", + "build:sass": "sass --no-source-map --load-path=../../node_modules \"./src/styles/:./src/styles/\"", + "build:watch": "nodemon -e scss,js --watch src --ignore \"*.css\" --ignore \"*-css.js\" --exec \"npm run build\"", + "bundler": "rollup -c node:@auro-formkit/config/rollup --input src/index.js", + "clean": "rm -rf dist build", + "dev": "concurrently \"npm run build:watch\" \"npm run serve\"", + "postCss:component": "node ../../node_modules/@aurodesignsystem/auro-library/scripts/build/postCss.mjs", + "sass:render": "sass-render --load-path=../../node_modules 'src/**/*.css' -t ../../node_modules/@aurodesignsystem/auro-library/scripts/build/staticStyles-template.js", + "serve": "web-dev-server --open demo/ --node-resolve --watch", + "types": "tsc --project tsconfig.json", + "lint": "npm-run-all scssLint esLint", + "scssLint": "stylelint \"./src/**/*.scss\"", + "esLint": "eslint \"./src/**/*.js\"" + } +} \ No newline at end of file diff --git a/components/counter/src/auro-counter.js b/components/counter/src/auro-counter.js new file mode 100644 index 00000000..a60fa9da --- /dev/null +++ b/components/counter/src/auro-counter.js @@ -0,0 +1,23 @@ +// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +import { html } from "lit/static-html.js"; +import { LitElement } from "lit"; + +import styleCss from "./styles/style-css.js"; + +export class AuroCounter extends LitElement { + + static get styles() { + return [styleCss]; + } + + // function that renders the HTML and CSS into the scope of the component + render() { + return html` +
+ +
+ `; + } +} diff --git a/components/counter/src/auro-countergroup.js b/components/counter/src/auro-countergroup.js new file mode 100644 index 00000000..0416d61a --- /dev/null +++ b/components/counter/src/auro-countergroup.js @@ -0,0 +1,42 @@ +// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- + +import { html } from "lit/static-html.js"; +import { LitElement } from "lit"; + +import styleCss from "./styles/countergroup-css.js"; + +export class AuroCountergroup extends LitElement { + + static get styles() { + return [styleCss]; + } + + static get properties() { + return { + common: { + type: Boolean, + reflect: true + }, + inset: { + type: Boolean, + reflect: true + }, + rounded: { + type: Boolean, + reflect: true + } + }; + } + + // function that renders the HTML and CSS into the scope of the component + render() { + return html` +
+ +
+ `; + } +} diff --git a/components/counter/src/index.js b/components/counter/src/index.js new file mode 100644 index 00000000..9cbc7931 --- /dev/null +++ b/components/counter/src/index.js @@ -0,0 +1,3 @@ +import { AuroCounter } from './auro-counter.js'; + +AuroCounter.register(); diff --git a/components/counter/src/scripts/version.mjs b/components/counter/src/scripts/version.mjs new file mode 100644 index 00000000..dd25540f --- /dev/null +++ b/components/counter/src/scripts/version.mjs @@ -0,0 +1,3 @@ +import { writeDepVersionFile } from '../../../../scripts/formVersionWriter.js'; + +writeDepVersionFile('@aurodesignsystem/auro-icon'); diff --git a/components/counter/src/styles/countergroup.scss b/components/counter/src/styles/countergroup.scss new file mode 100644 index 00000000..af83342f --- /dev/null +++ b/components/counter/src/styles/countergroup.scss @@ -0,0 +1,17 @@ +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license. +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- + +// layout styles - define any layout specifications for UI that is contained WITHIN the component +// never define layout that would cause effect on element outside the scope of this component + +// Support for fallback values +@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables"; +@import '@aurodesignsystem/webcorestylesheets/src/breakpoints'; + +/* stylelint-disable no-descending-specificity, selector-max-attribute */ + +:host { + position: relative; +} diff --git a/components/counter/src/styles/style.scss b/components/counter/src/styles/style.scss new file mode 100644 index 00000000..af83342f --- /dev/null +++ b/components/counter/src/styles/style.scss @@ -0,0 +1,17 @@ +// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license. +// See LICENSE in the project root for license information. + +// --------------------------------------------------------------------- + +// layout styles - define any layout specifications for UI that is contained WITHIN the component +// never define layout that would cause effect on element outside the scope of this component + +// Support for fallback values +@import "@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables"; +@import '@aurodesignsystem/webcorestylesheets/src/breakpoints'; + +/* stylelint-disable no-descending-specificity, selector-max-attribute */ + +:host { + position: relative; +} diff --git a/components/counter/tsconfig.json b/components/counter/tsconfig.json new file mode 100644 index 00000000..bd28f4b7 --- /dev/null +++ b/components/counter/tsconfig.json @@ -0,0 +1,16 @@ +{ + "extends": "@auro-formkit/typescript/base.json", + "compilerOptions": { + "outDir": "dist", + "rootDir": "src" + }, + "include": [ + "src/**/*.ts", + "src/**/*.js" + ], + "exclude": [ + "node_modules", + "dist", + "build" + ] +} \ No newline at end of file diff --git a/components/counter/web-dev-server.config.js b/components/counter/web-dev-server.config.js new file mode 100644 index 00000000..c69286d1 --- /dev/null +++ b/components/counter/web-dev-server.config.js @@ -0,0 +1,6 @@ +export default { + open: 'demo/', + nodeResolve: true, + watch: true, + port: 8010 +} \ No newline at end of file