@ukho/admiralty-core 0.4.2 → 0.4.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/admiralty/admiralty.esm.js +1 -1
- package/dist/admiralty/p-869d7709.entry.js +2 -0
- package/dist/admiralty/p-869d7709.entry.js.map +1 -0
- package/dist/cjs/admiralty-input.cjs.entry.js +2 -2
- package/dist/cjs/admiralty-input.cjs.entry.js.map +1 -1
- package/dist/collection/components/input/input.js +3 -3
- package/dist/collection/components/input/input.js.map +1 -1
- package/dist/components/input.js +2 -2
- package/dist/components/input.js.map +1 -1
- package/dist/esm/admiralty-input.entry.js +2 -2
- package/dist/esm/admiralty-input.entry.js.map +1 -1
- package/dist/types/components/input/input.d.ts +1 -1
- package/dist/types/components.d.ts +1 -1
- package/package.json +2 -2
- package/dist/admiralty/p-d7ee2a19.entry.js +0 -2
- package/dist/admiralty/p-d7ee2a19.entry.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{p as e,b as a}from"./p-a2b7bb90.js";export{s as setNonce}from"./p-a2b7bb90.js";const i=()=>{const a=import.meta.url;const i={};if(a!==""){i.resourcesUrl=new URL(".",a).href}return e(i)};i().then((e=>a([["p-2d32c7eb",[[6,"admiralty-type-ahead",{value:[1],label:[1],hint:[1],placeholder:[1],resultsOnInitFocus:[4,"results-on-init-focus"],filterResult:[32]}]]],["p-5d46659e",[[6,"admiralty-select",{disabled:[4],error:[4],errorHint:[1,"error-hint"],hint:[1],label:[1],width:[2],value:[1032]}]]],["p-8b01423e",[[2,"admiralty-textarea",{label:[1],hint:[1],width:[2],maxLength:[2,"max-length"],disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],value:[1032]}]]],["p-3ec17d3e",[[6,"admiralty-colour-block",{width:[2],height:[2],heading:[1],colour:[1],clickAction:[16],actionText:[1,"action-text"]}]]],["p-c4df365d",[[6,"admiralty-filter",{filterTitle:[1,"filter-title"]}]]],["p-cb194645",[[6,"admiralty-filter-group",{groupTitle:[1,"group-title"]}]]],["p-7a3d5dc2",[[2,"admiralty-paginator",{pages:[2],currentPage:[2,"current-page"],label:[1]}]]],["p-e8d6a025",[[6,"admiralty-breadcrumb",{active:[4],first:[4],href:[1]}]]],["p-2dabb66f",[[6,"admiralty-dialogue",{type:[1],heading:[1]}]]],["p-f7aa9b55",[[2,"admiralty-file-input",{label:[1],multiple:[4],files:[32]}]]],["p-91cfb37d",[[6,"admiralty-header",{headerTitle:[1,"header-title"],headerTitleUrl:[1,"header-title-url"],logoLinkUrl:[1,"logo-link-url"],logoImgUrl:[1,"logo-img-url"],logoAltText:[1,"logo-alt-text"],mobileMenuOpen:[32],displayHamburger:[32]}]]],["p-642161f7",[[2,"admiralty-progress-bar",{label:[1],progression:[2],error:[4],progressionValue:[32]}]]],["p-faf7ba7b",[[6,"admiralty-read-more",{heading:[1],expanded:[32]}]]],["p-85edda7b",[[6,"admiralty-breadcrumbs"]]],["p-91c5dc57",[[6,"admiralty-card",{heading:[1]}]]],["p-5e382d3b",[[2,"admiralty-checkbox",{checkboxRight:[4,"checkbox-right"],disabled:[4],name:[1],checked:[1028],value:[8],labelText:[1,"label-text"]}]]],["p-20e669e3",[[6,"admiralty-footer",{imageLink:[1,"image-link"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],text:[1]}]]],["p-e861546b",[[6,"admiralty-header-menu-item",{menuTitle:[1,"menu-title"],active:[4]}]]],["p-a789337a",[[2,"admiralty-header-profile",{isSignedIn:[4,"is-signed-in"],signedInText:[1,"signed-in-text"]}]]],["p-eedd8c86",[[2,"admiralty-header-sub-menu-item",{menuTitle:[1,"menu-title"]}]]],["p-2f1aa2ab",[[2,"admiralty-hr"]]],["p-f7e348fc",[[6,"admiralty-link",{href:[1],newTab:[4,"new-tab"]}]]],["p-1a46f741",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["p-57e9e984",[[2,"admiralty-phase-banner",{phase:[1],link:[1]}]]],["p-58fa7bfb",[[6,"admiralty-radio",{name:[1],value:[1025],disabled:[4],checked:[1028],buttonTabindex:[32],setButtonTabindex:[64]}]]],["p-b8dc6756",[[6,"admiralty-radio-group",{name:[1],value:[1032],displayVertical:[4,"display-vertical"]}]]],["p-1e5d6d5c",[[6,"admiralty-side-nav",{label:[1]}]]],["p-cc7da7d1",[[2,"admiralty-side-nav-item",{sideNavItemId:[1,"side-nav-item-id"],headingTitle:[1,"heading-title"],navActive:[4,"nav-active"]}]]],["p-42c8f788",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["p-ae604366",[[6,"admiralty-tab",{label:[1],tabLabelId:[1,"tab-label-id"],tabContentId:[1,"tab-content-id"]}]]],["p-eb68c30f",[[6,"admiralty-tab-group",{selectedIndex:[1026,"selected-index"]}]]],["p-1b4b629f",[[6,"admiralty-table",{caption:[1]}]]],["p-fe911ac8",[[6,"admiralty-table-body"]]],["p-478e51ae",[[6,"admiralty-table-cell"]]],["p-b0b751a0",[[6,"admiralty-table-header"]]],["p-72d0c7c2",[[6,"admiralty-table-header-cell"]]],["p-fd0c5de8",[[6,"admiralty-table-row"]]],["p-33ba3be8",[[2,"admiralty-type-ahead-item",{value:[1]}]]],["p-51bd438b",[[1,"admiralty-icon",{iconName:[1,"icon-name"],iconPrefix:[1,"icon-prefix"]}]]],["p-
|
|
1
|
+
import{p as e,b as a}from"./p-a2b7bb90.js";export{s as setNonce}from"./p-a2b7bb90.js";const i=()=>{const a=import.meta.url;const i={};if(a!==""){i.resourcesUrl=new URL(".",a).href}return e(i)};i().then((e=>a([["p-2d32c7eb",[[6,"admiralty-type-ahead",{value:[1],label:[1],hint:[1],placeholder:[1],resultsOnInitFocus:[4,"results-on-init-focus"],filterResult:[32]}]]],["p-5d46659e",[[6,"admiralty-select",{disabled:[4],error:[4],errorHint:[1,"error-hint"],hint:[1],label:[1],width:[2],value:[1032]}]]],["p-8b01423e",[[2,"admiralty-textarea",{label:[1],hint:[1],width:[2],maxLength:[2,"max-length"],disabled:[4],invalid:[4],invalidMessage:[1,"invalid-message"],value:[1032]}]]],["p-3ec17d3e",[[6,"admiralty-colour-block",{width:[2],height:[2],heading:[1],colour:[1],clickAction:[16],actionText:[1,"action-text"]}]]],["p-c4df365d",[[6,"admiralty-filter",{filterTitle:[1,"filter-title"]}]]],["p-cb194645",[[6,"admiralty-filter-group",{groupTitle:[1,"group-title"]}]]],["p-7a3d5dc2",[[2,"admiralty-paginator",{pages:[2],currentPage:[2,"current-page"],label:[1]}]]],["p-e8d6a025",[[6,"admiralty-breadcrumb",{active:[4],first:[4],href:[1]}]]],["p-2dabb66f",[[6,"admiralty-dialogue",{type:[1],heading:[1]}]]],["p-f7aa9b55",[[2,"admiralty-file-input",{label:[1],multiple:[4],files:[32]}]]],["p-91cfb37d",[[6,"admiralty-header",{headerTitle:[1,"header-title"],headerTitleUrl:[1,"header-title-url"],logoLinkUrl:[1,"logo-link-url"],logoImgUrl:[1,"logo-img-url"],logoAltText:[1,"logo-alt-text"],mobileMenuOpen:[32],displayHamburger:[32]}]]],["p-642161f7",[[2,"admiralty-progress-bar",{label:[1],progression:[2],error:[4],progressionValue:[32]}]]],["p-faf7ba7b",[[6,"admiralty-read-more",{heading:[1],expanded:[32]}]]],["p-85edda7b",[[6,"admiralty-breadcrumbs"]]],["p-91c5dc57",[[6,"admiralty-card",{heading:[1]}]]],["p-5e382d3b",[[2,"admiralty-checkbox",{checkboxRight:[4,"checkbox-right"],disabled:[4],name:[1],checked:[1028],value:[8],labelText:[1,"label-text"]}]]],["p-20e669e3",[[6,"admiralty-footer",{imageLink:[1,"image-link"],imageSrc:[1,"image-src"],imageAlt:[1,"image-alt"],text:[1]}]]],["p-e861546b",[[6,"admiralty-header-menu-item",{menuTitle:[1,"menu-title"],active:[4]}]]],["p-a789337a",[[2,"admiralty-header-profile",{isSignedIn:[4,"is-signed-in"],signedInText:[1,"signed-in-text"]}]]],["p-eedd8c86",[[2,"admiralty-header-sub-menu-item",{menuTitle:[1,"menu-title"]}]]],["p-2f1aa2ab",[[2,"admiralty-hr"]]],["p-f7e348fc",[[6,"admiralty-link",{href:[1],newTab:[4,"new-tab"]}]]],["p-1a46f741",[[4,"admiralty-paginator-wrapper",null,[[0,"pageChange","pageChangedHandler"]]]]],["p-57e9e984",[[2,"admiralty-phase-banner",{phase:[1],link:[1]}]]],["p-58fa7bfb",[[6,"admiralty-radio",{name:[1],value:[1025],disabled:[4],checked:[1028],buttonTabindex:[32],setButtonTabindex:[64]}]]],["p-b8dc6756",[[6,"admiralty-radio-group",{name:[1],value:[1032],displayVertical:[4,"display-vertical"]}]]],["p-1e5d6d5c",[[6,"admiralty-side-nav",{label:[1]}]]],["p-cc7da7d1",[[2,"admiralty-side-nav-item",{sideNavItemId:[1,"side-nav-item-id"],headingTitle:[1,"heading-title"],navActive:[4,"nav-active"]}]]],["p-42c8f788",[[4,"admiralty-side-nav-wrapper",null,[[0,"sideNavItemSelected","onSideNavItemSelected"]]]]],["p-ae604366",[[6,"admiralty-tab",{label:[1],tabLabelId:[1,"tab-label-id"],tabContentId:[1,"tab-content-id"]}]]],["p-eb68c30f",[[6,"admiralty-tab-group",{selectedIndex:[1026,"selected-index"]}]]],["p-1b4b629f",[[6,"admiralty-table",{caption:[1]}]]],["p-fe911ac8",[[6,"admiralty-table-body"]]],["p-478e51ae",[[6,"admiralty-table-cell"]]],["p-b0b751a0",[[6,"admiralty-table-header"]]],["p-72d0c7c2",[[6,"admiralty-table-header-cell"]]],["p-fd0c5de8",[[6,"admiralty-table-row"]]],["p-33ba3be8",[[2,"admiralty-type-ahead-item",{value:[1]}]]],["p-51bd438b",[[1,"admiralty-icon",{iconName:[1,"icon-name"],iconPrefix:[1,"icon-prefix"]}]]],["p-869d7709",[[2,"admiralty-input",{name:[1],label:[1],hint:[1],disabled:[4],type:[1],placeholder:[1],width:[2],maxLength:[2,"max-length"],required:[4],invalid:[4],invalidMessage:[1,"invalid-message"],autocomplete:[1],value:[1032]}]]],["p-0e8192b3",[[6,"admiralty-expansion",{heading:[1],expanded:[1540],alignHeadingRight:[4,"align-heading-right"],hideBorder:[4,"hide-border"]}]]],["p-9f649906",[[6,"admiralty-button",{variant:[1],icon:[1],disabled:[516],type:[1]}]]],["p-c027f79d",[[6,"admiralty-input-error"],[6,"admiralty-hint",{disabled:[4]}],[6,"admiralty-label",{disabled:[4],for:[1]}]]]],e)));
|
|
2
2
|
//# sourceMappingURL=admiralty.esm.js.map
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as t,c as i,h as s}from"./p-a2b7bb90.js";const n=".text-input-container.sc-admiralty-input{display:flex;flex-direction:column}.text-input-container.sc-admiralty-input input.sc-admiralty-input{background-color:#ffffff;border-color:#333333;border-width:2px;border-style:solid;color:#333333;font-size:18px;line-height:24px;font-weight:300;padding:12px}.text-input-container.sc-admiralty-input input.sc-admiralty-input:focus{outline-offset:unset;outline:3px solid #ffdd00;box-shadow:#333333 inset 0 0 0 2px}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input{border-color:#e20d0d}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input:focus-visible{border-color:unset;outline:3px solid #ffdd00}.text-input-container.sc-admiralty-input input.disabled.sc-admiralty-input{color:#adadad;border-color:#adadad;background:#ffffff}.text-input-container.sc-admiralty-input admiralty-input-error.sc-admiralty-input{margin-top:6px}";const e=class{constructor(s){t(this,s);this.admiraltyInput=i(this,"admiraltyInput",7);this.inputId=`admiralty-input-${++a}`;this.onInput=t=>{const i=t.target;if(i){this.value=i.value||""}};this.name=this.inputId;this.label=undefined;this.hint=undefined;this.disabled=false;this.type="text";this.placeholder=undefined;this.width=undefined;this.maxLength=undefined;this.required=false;this.invalid=false;this.invalidMessage=undefined;this.autocomplete="off";this.value=""}valueChanged(){const t=this.nativeInput;const i=this.getValue();if(t&&t.value!==i){t.value=i}this.admiraltyInput.emit({value:this.value==null?this.getValue():this.value.toString()})}getValue(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()}render(){const t=this.getValue();return s("div",{class:"text-input-container"},this.label?s("admiralty-label",{disabled:this.disabled,for:this.inputId},this.label):null,this.hint?s("admiralty-hint",{disabled:this.disabled},this.hint):null,s("input",{ref:t=>this.nativeInput=t,class:{disabled:this.disabled,invalid:this.invalid},disabled:this.disabled,id:this.inputId,name:this.name,type:this.type,value:t,maxLength:this.maxLength,onInput:this.onInput,placeholder:this.placeholder,autoComplete:this.autocomplete,required:this.required,style:{maxWidth:this.width?`${this.width}px`:null}}),s("admiralty-input-error",{style:{visibility:this.invalid&&this.invalidMessage?"visible":"hidden"}},this.invalidMessage))}static get watchers(){return{value:["valueChanged"]}}};let a=0;e.style=n;export{e as admiralty_input};
|
|
2
|
+
//# sourceMappingURL=p-869d7709.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["inputCss","InputComponent","this","inputId","nextId","onInput","ev","input","target","value","valueChanged","nativeInput","getValue","admiraltyInput","emit","toString","render","h","class","label","disabled","for","hint","ref","invalid","id","name","type","maxLength","placeholder","autoComplete","autocomplete","required","style","maxWidth","width","visibility","invalidMessage"],"sources":["./src/components/input/input.scss?tag=admiralty-input&encapsulation=scoped","./src/components/input/input.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.text-input-container {\n display: flex;\n flex-direction: column;\n\n input {\n background-color: colours.$colour-white;\n border-color: colours.$colour-text;\n border-width: 2px;\n border-style: solid;\n color: colours.$colour-text;\n font-size: 18px;\n line-height: 24px;\n font-weight: typography.$font-weight-light;\n\n padding: 12px;\n\n &:focus {\n outline-offset: unset;\n outline: 3px solid colours.$colour-utility-focus;\n box-shadow: colours.$colour-text inset 0 0 0 2px;\n }\n\n &.invalid {\n border-color: colours.$colour-utility-error;\n\n &:focus-visible {\n border-color: unset;\n outline: 3px solid colours.$colour-utility-focus;\n }\n }\n\n &.disabled {\n color: colours.$colour-textinput-text-disabled;\n border-color: colours.$colour-textinput-border-disabled;\n background: colours.$colour-white;\n }\n }\n\n admiralty-input-error {\n margin-top: 6px;\n }\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { InputChangeEventDetail } from './input.interface';\n\n/**\n * Once this component works, review whether a form field component should be created so\n * that shared properties such as `label`, `hint`, `disabled` etc. can be defined once.\n * Examples of similar components that can extend that base component are area, select\n * and checkbox.\n */\n\n@Component({\n tag: 'admiralty-input',\n styleUrl: 'input.scss',\n scoped: true,\n})\nexport class InputComponent implements ComponentInterface {\n inputId: string = `admiralty-input-${++nextId}`;\n\n private nativeInput?: HTMLInputElement;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * The label which will be used above the input to describe the input.\n */\n @Prop() label: string;\n\n /**\n * The hint which will be used under the label to describe the input.\n */\n @Prop() hint: string;\n\n /**\n * This dictates whether the form field is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * The input type, options are: `text | date | time | email | password | tel | url`\n */\n @Prop() type: 'text' | 'date' | 'time' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n /**\n * The placeholder text to show in the input\n */\n @Prop() placeholder: string;\n\n /**\n * The maximum width for the input field.\n */\n @Prop() width: number;\n\n /**\n * The maximum string length for the input field.\n */\n @Prop() maxLength?: number;\n\n /**\n * This dictates whether the input is required or not\n */\n @Prop() required: boolean = false;\n\n /**\n * Whether to show the input in an invalid state\n */\n @Prop() invalid: boolean = false;\n\n /**\n * The message to show when the input is invalid\n */\n @Prop() invalidMessage: string;\n\n /**\n * Indicates whether the value of the control can be automatically completed by the browser.\n */\n @Prop() autocomplete: string = 'off';\n\n /**\n * The value of the input.\n */\n @Prop({ mutable: true }) value?: string | number | null = '';\n\n /**\n * Emitted when the value has changed.\n */\n @Event() admiraltyInput: EventEmitter<InputChangeEventDetail>;\n\n /**\n * Update the native input element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n const nativeInput = this.nativeInput;\n const value = this.getValue();\n if (nativeInput && nativeInput.value !== value) {\n nativeInput.value = value;\n }\n this.admiraltyInput.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n this.value = input.value || '';\n }\n };\n\n private getValue(): string {\n return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n }\n\n render() {\n const value = this.getValue();\n return (\n <div class=\"text-input-container\">\n {this.label ? (\n <admiralty-label disabled={this.disabled} for={this.inputId}>\n {this.label}\n </admiralty-label>\n ) : null}\n {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n <input\n ref={input => (this.nativeInput = input)}\n class={{ disabled: this.disabled, invalid: this.invalid }}\n disabled={this.disabled}\n id={this.inputId}\n name={this.name}\n type={this.type}\n value={value}\n maxLength={this.maxLength}\n onInput={this.onInput}\n placeholder={this.placeholder}\n autoComplete={this.autocomplete}\n required={this.required}\n style={{\n maxWidth: this.width ? `${this.width}px` : null,\n }}\n />\n <admiralty-input-error style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n </div>\n );\n }\n}\nlet nextId = 0;\n"],"mappings":"kDAAA,MAAMA,EAAW,84B,MCeJC,EAAc,M,wEACzBC,KAAAC,QAAkB,qBAAqBC,IAuF/BF,KAAAG,QAAWC,IACjB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTL,KAAKO,MAAQF,EAAME,OAAS,E,aAnFTP,KAAKC,Q,uDAeT,M,UAK6D,O,uFAoBpD,M,aAKD,M,gDAUI,M,WAK2B,E,CAWhDO,eACR,MAAMC,EAAcT,KAAKS,YACzB,MAAMF,EAAQP,KAAKU,WACnB,GAAID,GAAeA,EAAYF,QAAUA,EAAO,CAC9CE,EAAYF,MAAQA,C,CAEtBP,KAAKW,eAAeC,KAAK,CAAEL,MAAOP,KAAKO,OAAS,KAAOP,KAAKU,WAAaV,KAAKO,MAAMM,Y,CAU9EH,WACN,cAAcV,KAAKO,QAAU,SAAWP,KAAKO,MAAMM,YAAcb,KAAKO,OAAS,IAAIM,U,CAGrFC,SACE,MAAMP,EAAQP,KAAKU,WACnB,OACEK,EAAA,OAAKC,MAAM,wBACRhB,KAAKiB,MACJF,EAAA,mBAAiBG,SAAUlB,KAAKkB,SAAUC,IAAKnB,KAAKC,SACjDD,KAAKiB,OAEN,KACHjB,KAAKoB,KAAOL,EAAA,kBAAgBG,SAAUlB,KAAKkB,UAAWlB,KAAKoB,MAAyB,KACrFL,EAAA,SACEM,IAAKhB,GAAUL,KAAKS,YAAcJ,EAClCW,MAAO,CAAEE,SAAUlB,KAAKkB,SAAUI,QAAStB,KAAKsB,SAChDJ,SAAUlB,KAAKkB,SACfK,GAAIvB,KAAKC,QACTuB,KAAMxB,KAAKwB,KACXC,KAAMzB,KAAKyB,KACXlB,MAAOA,EACPmB,UAAW1B,KAAK0B,UAChBvB,QAASH,KAAKG,QACdwB,YAAa3B,KAAK2B,YAClBC,aAAc5B,KAAK6B,aACnBC,SAAU9B,KAAK8B,SACfC,MAAO,CACLC,SAAUhC,KAAKiC,MAAQ,GAAGjC,KAAKiC,UAAY,QAG/ClB,EAAA,yBAAuBgB,MAAO,CAAEG,WAAYlC,KAAKsB,SAAWtB,KAAKmC,eAAiB,UAAY,WAAanC,KAAKmC,gB,wDAKxH,IAAIjC,EAAS,E"}
|
|
@@ -9,7 +9,7 @@ const inputCss = ".text-input-container.sc-admiralty-input{display:flex;flex-dir
|
|
|
9
9
|
const InputComponent = class {
|
|
10
10
|
constructor(hostRef) {
|
|
11
11
|
index.registerInstance(this, hostRef);
|
|
12
|
-
this.
|
|
12
|
+
this.admiraltyInput = index.createEvent(this, "admiraltyInput", 7);
|
|
13
13
|
this.inputId = `admiralty-input-${++nextId}`;
|
|
14
14
|
this.onInput = (ev) => {
|
|
15
15
|
const input = ev.target;
|
|
@@ -40,7 +40,7 @@ const InputComponent = class {
|
|
|
40
40
|
if (nativeInput && nativeInput.value !== value) {
|
|
41
41
|
nativeInput.value = value;
|
|
42
42
|
}
|
|
43
|
-
this.
|
|
43
|
+
this.admiraltyInput.emit({ value: this.value == null ? this.getValue() : this.value.toString() });
|
|
44
44
|
}
|
|
45
45
|
getValue() {
|
|
46
46
|
return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"admiralty-input.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,64BAA64B;;MCej5B,cAAc;;;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAuFxC,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;KACF,CAAC;gBArFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;;oBAoB1D,KAAK;mBAKN,KAAK;;wBAUD,KAAK;iBAKsB,EAAE;;;;;EAWlD,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,
|
|
1
|
+
{"file":"admiralty-input.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,64BAA64B;;MCej5B,cAAc;;;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAuFxC,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;KACF,CAAC;gBArFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;;oBAoB1D,KAAK;mBAKN,KAAK;;wBAUD,KAAK;iBAKsB,EAAE;;;;;EAWlD,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GACnG;EASO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GAC/F;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,QACEA,iBAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,KAAK,IACTA,6BAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IACxD,IAAI,CAAC,KAAK,CACK,IAChB,IAAI,EACP,IAAI,CAAC,IAAI,GAAGA,4BAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,GAAG,IAAI,EACzFA,mBACE,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EACxC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EACzD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,IAAI;OAChD,GACD,EACFA,mCAAuB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAAyB,CACnJ,EACN;GACH;;;;;AAEH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;","names":["h"],"sources":["./src/components/input/input.scss?tag=admiralty-input&encapsulation=scoped","./src/components/input/input.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.text-input-container {\n display: flex;\n flex-direction: column;\n\n input {\n background-color: colours.$colour-white;\n border-color: colours.$colour-text;\n border-width: 2px;\n border-style: solid;\n color: colours.$colour-text;\n font-size: 18px;\n line-height: 24px;\n font-weight: typography.$font-weight-light;\n\n padding: 12px;\n\n &:focus {\n outline-offset: unset;\n outline: 3px solid colours.$colour-utility-focus;\n box-shadow: colours.$colour-text inset 0 0 0 2px;\n }\n\n &.invalid {\n border-color: colours.$colour-utility-error;\n\n &:focus-visible {\n border-color: unset;\n outline: 3px solid colours.$colour-utility-focus;\n }\n }\n\n &.disabled {\n color: colours.$colour-textinput-text-disabled;\n border-color: colours.$colour-textinput-border-disabled;\n background: colours.$colour-white;\n }\n }\n\n admiralty-input-error {\n margin-top: 6px;\n }\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { InputChangeEventDetail } from './input.interface';\n\n/**\n * Once this component works, review whether a form field component should be created so\n * that shared properties such as `label`, `hint`, `disabled` etc. can be defined once.\n * Examples of similar components that can extend that base component are area, select\n * and checkbox.\n */\n\n@Component({\n tag: 'admiralty-input',\n styleUrl: 'input.scss',\n scoped: true,\n})\nexport class InputComponent implements ComponentInterface {\n inputId: string = `admiralty-input-${++nextId}`;\n\n private nativeInput?: HTMLInputElement;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * The label which will be used above the input to describe the input.\n */\n @Prop() label: string;\n\n /**\n * The hint which will be used under the label to describe the input.\n */\n @Prop() hint: string;\n\n /**\n * This dictates whether the form field is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * The input type, options are: `text | date | time | email | password | tel | url`\n */\n @Prop() type: 'text' | 'date' | 'time' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n /**\n * The placeholder text to show in the input\n */\n @Prop() placeholder: string;\n\n /**\n * The maximum width for the input field.\n */\n @Prop() width: number;\n\n /**\n * The maximum string length for the input field.\n */\n @Prop() maxLength?: number;\n\n /**\n * This dictates whether the input is required or not\n */\n @Prop() required: boolean = false;\n\n /**\n * Whether to show the input in an invalid state\n */\n @Prop() invalid: boolean = false;\n\n /**\n * The message to show when the input is invalid\n */\n @Prop() invalidMessage: string;\n\n /**\n * Indicates whether the value of the control can be automatically completed by the browser.\n */\n @Prop() autocomplete: string = 'off';\n\n /**\n * The value of the input.\n */\n @Prop({ mutable: true }) value?: string | number | null = '';\n\n /**\n * Emitted when the value has changed.\n */\n @Event() admiraltyInput: EventEmitter<InputChangeEventDetail>;\n\n /**\n * Update the native input element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n const nativeInput = this.nativeInput;\n const value = this.getValue();\n if (nativeInput && nativeInput.value !== value) {\n nativeInput.value = value;\n }\n this.admiraltyInput.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n this.value = input.value || '';\n }\n };\n\n private getValue(): string {\n return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n }\n\n render() {\n const value = this.getValue();\n return (\n <div class=\"text-input-container\">\n {this.label ? (\n <admiralty-label disabled={this.disabled} for={this.inputId}>\n {this.label}\n </admiralty-label>\n ) : null}\n {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n <input\n ref={input => (this.nativeInput = input)}\n class={{ disabled: this.disabled, invalid: this.invalid }}\n disabled={this.disabled}\n id={this.inputId}\n name={this.name}\n type={this.type}\n value={value}\n maxLength={this.maxLength}\n onInput={this.onInput}\n placeholder={this.placeholder}\n autoComplete={this.autocomplete}\n required={this.required}\n style={{\n maxWidth: this.width ? `${this.width}px` : null,\n }}\n />\n <admiralty-input-error style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n </div>\n );\n }\n}\nlet nextId = 0;\n"],"version":3}
|
|
@@ -37,7 +37,7 @@ export class InputComponent {
|
|
|
37
37
|
if (nativeInput && nativeInput.value !== value) {
|
|
38
38
|
nativeInput.value = value;
|
|
39
39
|
}
|
|
40
|
-
this.
|
|
40
|
+
this.admiraltyInput.emit({ value: this.value == null ? this.getValue() : this.value.toString() });
|
|
41
41
|
}
|
|
42
42
|
getValue() {
|
|
43
43
|
return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();
|
|
@@ -294,8 +294,8 @@ export class InputComponent {
|
|
|
294
294
|
}
|
|
295
295
|
static get events() {
|
|
296
296
|
return [{
|
|
297
|
-
"method": "
|
|
298
|
-
"name": "
|
|
297
|
+
"method": "admiraltyInput",
|
|
298
|
+
"name": "admiraltyInput",
|
|
299
299
|
"bubbles": true,
|
|
300
300
|
"cancelable": true,
|
|
301
301
|
"composed": true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGnG;;;;;GAKG;AAOH,MAAM,OAAO,cAAc;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAuFxC,YAAO,GAAG,CAAC,EAAS,EAAE,EAAE;MAC9B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;IACH,CAAC,CAAC;gBArFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;;oBAoB1D,KAAK;mBAKN,KAAK;;wBAUD,KAAK;iBAKsB,EAAE;;EAO5D;;KAEG;EAEO,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,
|
|
1
|
+
{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAGnG;;;;;GAKG;AAOH,MAAM,OAAO,cAAc;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAuFxC,YAAO,GAAG,CAAC,EAAS,EAAE,EAAE;MAC9B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;IACH,CAAC,CAAC;gBArFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;;oBAoB1D,KAAK;mBAKN,KAAK;;wBAUD,KAAK;iBAKsB,EAAE;;EAO5D;;KAEG;EAEO,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;EACpG,CAAC;EASO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,QAAQ,EAAE,CAAC;EAChG,CAAC;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,OAAO,CACL,WAAK,KAAK,EAAC,sBAAsB;MAC9B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CACZ,uBAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IACxD,IAAI,CAAC,KAAK,CACK,CACnB,CAAC,CAAC,CAAC,IAAI;MACP,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,CAAC,CAAC,CAAC,IAAI;MACzF,aACE,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EACxC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EACzD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;UACL,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI;SAChD,GACD;MACF,6BAAuB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAAyB,CACnJ,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AACD,IAAI,MAAM,GAAG,CAAC,CAAC","sourcesContent":["import { Component, ComponentInterface, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { InputChangeEventDetail } from './input.interface';\n\n/**\n * Once this component works, review whether a form field component should be created so\n * that shared properties such as `label`, `hint`, `disabled` etc. can be defined once.\n * Examples of similar components that can extend that base component are area, select\n * and checkbox.\n */\n\n@Component({\n tag: 'admiralty-input',\n styleUrl: 'input.scss',\n scoped: true,\n})\nexport class InputComponent implements ComponentInterface {\n inputId: string = `admiralty-input-${++nextId}`;\n\n private nativeInput?: HTMLInputElement;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * The label which will be used above the input to describe the input.\n */\n @Prop() label: string;\n\n /**\n * The hint which will be used under the label to describe the input.\n */\n @Prop() hint: string;\n\n /**\n * This dictates whether the form field is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * The input type, options are: `text | date | time | email | password | tel | url`\n */\n @Prop() type: 'text' | 'date' | 'time' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n /**\n * The placeholder text to show in the input\n */\n @Prop() placeholder: string;\n\n /**\n * The maximum width for the input field.\n */\n @Prop() width: number;\n\n /**\n * The maximum string length for the input field.\n */\n @Prop() maxLength?: number;\n\n /**\n * This dictates whether the input is required or not\n */\n @Prop() required: boolean = false;\n\n /**\n * Whether to show the input in an invalid state\n */\n @Prop() invalid: boolean = false;\n\n /**\n * The message to show when the input is invalid\n */\n @Prop() invalidMessage: string;\n\n /**\n * Indicates whether the value of the control can be automatically completed by the browser.\n */\n @Prop() autocomplete: string = 'off';\n\n /**\n * The value of the input.\n */\n @Prop({ mutable: true }) value?: string | number | null = '';\n\n /**\n * Emitted when the value has changed.\n */\n @Event() admiraltyInput: EventEmitter<InputChangeEventDetail>;\n\n /**\n * Update the native input element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n const nativeInput = this.nativeInput;\n const value = this.getValue();\n if (nativeInput && nativeInput.value !== value) {\n nativeInput.value = value;\n }\n this.admiraltyInput.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n this.value = input.value || '';\n }\n };\n\n private getValue(): string {\n return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n }\n\n render() {\n const value = this.getValue();\n return (\n <div class=\"text-input-container\">\n {this.label ? (\n <admiralty-label disabled={this.disabled} for={this.inputId}>\n {this.label}\n </admiralty-label>\n ) : null}\n {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n <input\n ref={input => (this.nativeInput = input)}\n class={{ disabled: this.disabled, invalid: this.invalid }}\n disabled={this.disabled}\n id={this.inputId}\n name={this.name}\n type={this.type}\n value={value}\n maxLength={this.maxLength}\n onInput={this.onInput}\n placeholder={this.placeholder}\n autoComplete={this.autocomplete}\n required={this.required}\n style={{\n maxWidth: this.width ? `${this.width}px` : null,\n }}\n />\n <admiralty-input-error style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n </div>\n );\n }\n}\nlet nextId = 0;\n"]}
|
package/dist/components/input.js
CHANGED
|
@@ -10,7 +10,7 @@ const InputComponent = /*@__PURE__*/ proxyCustomElement(class InputComponent ext
|
|
|
10
10
|
constructor() {
|
|
11
11
|
super();
|
|
12
12
|
this.__registerHost();
|
|
13
|
-
this.
|
|
13
|
+
this.admiraltyInput = createEvent(this, "admiraltyInput", 7);
|
|
14
14
|
this.inputId = `admiralty-input-${++nextId}`;
|
|
15
15
|
this.onInput = (ev) => {
|
|
16
16
|
const input = ev.target;
|
|
@@ -41,7 +41,7 @@ const InputComponent = /*@__PURE__*/ proxyCustomElement(class InputComponent ext
|
|
|
41
41
|
if (nativeInput && nativeInput.value !== value) {
|
|
42
42
|
nativeInput.value = value;
|
|
43
43
|
}
|
|
44
|
-
this.
|
|
44
|
+
this.admiraltyInput.emit({ value: this.value == null ? this.getValue() : this.value.toString() });
|
|
45
45
|
}
|
|
46
46
|
getValue() {
|
|
47
47
|
return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"input.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,64BAA64B;;MCej5B,cAAc;;;;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAuFxC,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;KACF,CAAC;gBArFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;;oBAoB1D,KAAK;mBAKN,KAAK;;wBAUD,KAAK;iBAKsB,EAAE;;;;;EAWlD,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,
|
|
1
|
+
{"file":"input.js","mappings":";;;;;;AAAA,MAAM,QAAQ,GAAG,64BAA64B;;MCej5B,cAAc;;;;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAuFxC,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;KACF,CAAC;gBArFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;;oBAoB1D,KAAK;mBAKN,KAAK;;wBAUD,KAAK;iBAKsB,EAAE;;;;;EAWlD,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GACnG;EASO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GAC/F;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,QACE,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,KAAK,IACT,uBAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IACxD,IAAI,CAAC,KAAK,CACK,IAChB,IAAI,EACP,IAAI,CAAC,IAAI,GAAG,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,GAAG,IAAI,EACzF,aACE,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EACxC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EACzD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,IAAI;OAChD,GACD,EACF,6BAAuB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAAyB,CACnJ,EACN;GACH;;;;;;;;;;;;;;;;;;;;AAEH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["./src/components/input/input.scss?tag=admiralty-input&encapsulation=scoped","./src/components/input/input.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.text-input-container {\n display: flex;\n flex-direction: column;\n\n input {\n background-color: colours.$colour-white;\n border-color: colours.$colour-text;\n border-width: 2px;\n border-style: solid;\n color: colours.$colour-text;\n font-size: 18px;\n line-height: 24px;\n font-weight: typography.$font-weight-light;\n\n padding: 12px;\n\n &:focus {\n outline-offset: unset;\n outline: 3px solid colours.$colour-utility-focus;\n box-shadow: colours.$colour-text inset 0 0 0 2px;\n }\n\n &.invalid {\n border-color: colours.$colour-utility-error;\n\n &:focus-visible {\n border-color: unset;\n outline: 3px solid colours.$colour-utility-focus;\n }\n }\n\n &.disabled {\n color: colours.$colour-textinput-text-disabled;\n border-color: colours.$colour-textinput-border-disabled;\n background: colours.$colour-white;\n }\n }\n\n admiralty-input-error {\n margin-top: 6px;\n }\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { InputChangeEventDetail } from './input.interface';\n\n/**\n * Once this component works, review whether a form field component should be created so\n * that shared properties such as `label`, `hint`, `disabled` etc. can be defined once.\n * Examples of similar components that can extend that base component are area, select\n * and checkbox.\n */\n\n@Component({\n tag: 'admiralty-input',\n styleUrl: 'input.scss',\n scoped: true,\n})\nexport class InputComponent implements ComponentInterface {\n inputId: string = `admiralty-input-${++nextId}`;\n\n private nativeInput?: HTMLInputElement;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * The label which will be used above the input to describe the input.\n */\n @Prop() label: string;\n\n /**\n * The hint which will be used under the label to describe the input.\n */\n @Prop() hint: string;\n\n /**\n * This dictates whether the form field is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * The input type, options are: `text | date | time | email | password | tel | url`\n */\n @Prop() type: 'text' | 'date' | 'time' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n /**\n * The placeholder text to show in the input\n */\n @Prop() placeholder: string;\n\n /**\n * The maximum width for the input field.\n */\n @Prop() width: number;\n\n /**\n * The maximum string length for the input field.\n */\n @Prop() maxLength?: number;\n\n /**\n * This dictates whether the input is required or not\n */\n @Prop() required: boolean = false;\n\n /**\n * Whether to show the input in an invalid state\n */\n @Prop() invalid: boolean = false;\n\n /**\n * The message to show when the input is invalid\n */\n @Prop() invalidMessage: string;\n\n /**\n * Indicates whether the value of the control can be automatically completed by the browser.\n */\n @Prop() autocomplete: string = 'off';\n\n /**\n * The value of the input.\n */\n @Prop({ mutable: true }) value?: string | number | null = '';\n\n /**\n * Emitted when the value has changed.\n */\n @Event() admiraltyInput: EventEmitter<InputChangeEventDetail>;\n\n /**\n * Update the native input element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n const nativeInput = this.nativeInput;\n const value = this.getValue();\n if (nativeInput && nativeInput.value !== value) {\n nativeInput.value = value;\n }\n this.admiraltyInput.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n this.value = input.value || '';\n }\n };\n\n private getValue(): string {\n return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n }\n\n render() {\n const value = this.getValue();\n return (\n <div class=\"text-input-container\">\n {this.label ? (\n <admiralty-label disabled={this.disabled} for={this.inputId}>\n {this.label}\n </admiralty-label>\n ) : null}\n {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n <input\n ref={input => (this.nativeInput = input)}\n class={{ disabled: this.disabled, invalid: this.invalid }}\n disabled={this.disabled}\n id={this.inputId}\n name={this.name}\n type={this.type}\n value={value}\n maxLength={this.maxLength}\n onInput={this.onInput}\n placeholder={this.placeholder}\n autoComplete={this.autocomplete}\n required={this.required}\n style={{\n maxWidth: this.width ? `${this.width}px` : null,\n }}\n />\n <admiralty-input-error style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n </div>\n );\n }\n}\nlet nextId = 0;\n"],"version":3}
|
|
@@ -5,7 +5,7 @@ const inputCss = ".text-input-container.sc-admiralty-input{display:flex;flex-dir
|
|
|
5
5
|
const InputComponent = class {
|
|
6
6
|
constructor(hostRef) {
|
|
7
7
|
registerInstance(this, hostRef);
|
|
8
|
-
this.
|
|
8
|
+
this.admiraltyInput = createEvent(this, "admiraltyInput", 7);
|
|
9
9
|
this.inputId = `admiralty-input-${++nextId}`;
|
|
10
10
|
this.onInput = (ev) => {
|
|
11
11
|
const input = ev.target;
|
|
@@ -36,7 +36,7 @@ const InputComponent = class {
|
|
|
36
36
|
if (nativeInput && nativeInput.value !== value) {
|
|
37
37
|
nativeInput.value = value;
|
|
38
38
|
}
|
|
39
|
-
this.
|
|
39
|
+
this.admiraltyInput.emit({ value: this.value == null ? this.getValue() : this.value.toString() });
|
|
40
40
|
}
|
|
41
41
|
getValue() {
|
|
42
42
|
return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"admiralty-input.entry.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,64BAA64B;;MCej5B,cAAc;;;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAuFxC,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;KACF,CAAC;gBArFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;;oBAoB1D,KAAK;mBAKN,KAAK;;wBAUD,KAAK;iBAKsB,EAAE;;;;;EAWlD,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,
|
|
1
|
+
{"file":"admiralty-input.entry.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,64BAA64B;;MCej5B,cAAc;;;;IACzB,YAAO,GAAW,mBAAmB,EAAE,MAAM,EAAE,CAAC;IAuFxC,YAAO,GAAG,CAAC,EAAS;MAC1B,MAAM,KAAK,GAAG,EAAE,CAAC,MAAiC,CAAC;MACnD,IAAI,KAAK,EAAE;QACT,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;OAChC;KACF,CAAC;gBArFqB,IAAI,CAAC,OAAO;;;oBAehB,KAAK;gBAKwD,MAAM;;;;oBAoB1D,KAAK;mBAKN,KAAK;;wBAUD,KAAK;iBAKsB,EAAE;;;;;EAWlD,YAAY;IACpB,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACrC,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,KAAK,EAAE;MAC9C,WAAW,CAAC,KAAK,GAAG,KAAK,CAAC;KAC3B;IACD,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;GACnG;EASO,QAAQ;IACd,OAAO,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,EAAE,QAAQ,EAAE,CAAC;GAC/F;EAED,MAAM;IACJ,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;IAC9B,QACE,WAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,KAAK,IACT,uBAAiB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IACxD,IAAI,CAAC,KAAK,CACK,IAChB,IAAI,EACP,IAAI,CAAC,IAAI,GAAG,sBAAgB,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAG,IAAI,CAAC,IAAI,CAAkB,GAAG,IAAI,EACzF,aACE,GAAG,EAAE,KAAK,KAAK,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,EACxC,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EACzD,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE;QACL,QAAQ,EAAE,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,GAAG,IAAI;OAChD,GACD,EACF,6BAAuB,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc,GAAG,SAAS,GAAG,QAAQ,EAAE,IAAG,IAAI,CAAC,cAAc,CAAyB,CACnJ,EACN;GACH;;;;;AAEH,IAAI,MAAM,GAAG,CAAC,CAAC;;;;;","names":[],"sources":["./src/components/input/input.scss?tag=admiralty-input&encapsulation=scoped","./src/components/input/input.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.text-input-container {\n display: flex;\n flex-direction: column;\n\n input {\n background-color: colours.$colour-white;\n border-color: colours.$colour-text;\n border-width: 2px;\n border-style: solid;\n color: colours.$colour-text;\n font-size: 18px;\n line-height: 24px;\n font-weight: typography.$font-weight-light;\n\n padding: 12px;\n\n &:focus {\n outline-offset: unset;\n outline: 3px solid colours.$colour-utility-focus;\n box-shadow: colours.$colour-text inset 0 0 0 2px;\n }\n\n &.invalid {\n border-color: colours.$colour-utility-error;\n\n &:focus-visible {\n border-color: unset;\n outline: 3px solid colours.$colour-utility-focus;\n }\n }\n\n &.disabled {\n color: colours.$colour-textinput-text-disabled;\n border-color: colours.$colour-textinput-border-disabled;\n background: colours.$colour-white;\n }\n }\n\n admiralty-input-error {\n margin-top: 6px;\n }\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { InputChangeEventDetail } from './input.interface';\n\n/**\n * Once this component works, review whether a form field component should be created so\n * that shared properties such as `label`, `hint`, `disabled` etc. can be defined once.\n * Examples of similar components that can extend that base component are area, select\n * and checkbox.\n */\n\n@Component({\n tag: 'admiralty-input',\n styleUrl: 'input.scss',\n scoped: true,\n})\nexport class InputComponent implements ComponentInterface {\n inputId: string = `admiralty-input-${++nextId}`;\n\n private nativeInput?: HTMLInputElement;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * The label which will be used above the input to describe the input.\n */\n @Prop() label: string;\n\n /**\n * The hint which will be used under the label to describe the input.\n */\n @Prop() hint: string;\n\n /**\n * This dictates whether the form field is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * The input type, options are: `text | date | time | email | password | tel | url`\n */\n @Prop() type: 'text' | 'date' | 'time' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n /**\n * The placeholder text to show in the input\n */\n @Prop() placeholder: string;\n\n /**\n * The maximum width for the input field.\n */\n @Prop() width: number;\n\n /**\n * The maximum string length for the input field.\n */\n @Prop() maxLength?: number;\n\n /**\n * This dictates whether the input is required or not\n */\n @Prop() required: boolean = false;\n\n /**\n * Whether to show the input in an invalid state\n */\n @Prop() invalid: boolean = false;\n\n /**\n * The message to show when the input is invalid\n */\n @Prop() invalidMessage: string;\n\n /**\n * Indicates whether the value of the control can be automatically completed by the browser.\n */\n @Prop() autocomplete: string = 'off';\n\n /**\n * The value of the input.\n */\n @Prop({ mutable: true }) value?: string | number | null = '';\n\n /**\n * Emitted when the value has changed.\n */\n @Event() admiraltyInput: EventEmitter<InputChangeEventDetail>;\n\n /**\n * Update the native input element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n const nativeInput = this.nativeInput;\n const value = this.getValue();\n if (nativeInput && nativeInput.value !== value) {\n nativeInput.value = value;\n }\n this.admiraltyInput.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n this.value = input.value || '';\n }\n };\n\n private getValue(): string {\n return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n }\n\n render() {\n const value = this.getValue();\n return (\n <div class=\"text-input-container\">\n {this.label ? (\n <admiralty-label disabled={this.disabled} for={this.inputId}>\n {this.label}\n </admiralty-label>\n ) : null}\n {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n <input\n ref={input => (this.nativeInput = input)}\n class={{ disabled: this.disabled, invalid: this.invalid }}\n disabled={this.disabled}\n id={this.inputId}\n name={this.name}\n type={this.type}\n value={value}\n maxLength={this.maxLength}\n onInput={this.onInput}\n placeholder={this.placeholder}\n autoComplete={this.autocomplete}\n required={this.required}\n style={{\n maxWidth: this.width ? `${this.width}px` : null,\n }}\n />\n <admiralty-input-error style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n </div>\n );\n }\n}\nlet nextId = 0;\n"],"version":3}
|
|
@@ -64,7 +64,7 @@ export declare class InputComponent implements ComponentInterface {
|
|
|
64
64
|
/**
|
|
65
65
|
* Emitted when the value has changed.
|
|
66
66
|
*/
|
|
67
|
-
|
|
67
|
+
admiraltyInput: EventEmitter<InputChangeEventDetail>;
|
|
68
68
|
/**
|
|
69
69
|
* Update the native input element when the value changes
|
|
70
70
|
*/
|
|
@@ -1303,7 +1303,7 @@ declare namespace LocalJSX {
|
|
|
1303
1303
|
/**
|
|
1304
1304
|
* Emitted when the value has changed.
|
|
1305
1305
|
*/
|
|
1306
|
-
"
|
|
1306
|
+
"onAdmiraltyInput"?: (event: AdmiraltyInputCustomEvent<InputChangeEventDetail>) => void;
|
|
1307
1307
|
/**
|
|
1308
1308
|
* The placeholder text to show in the input
|
|
1309
1309
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ukho/admiralty-core",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.3",
|
|
4
4
|
"description": "Stencil Component Starter",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -67,5 +67,5 @@
|
|
|
67
67
|
"license": "MIT",
|
|
68
68
|
"url": "https://github.com/UKHO/admiralty-design-system",
|
|
69
69
|
"repository": "git://github.com/UKHO/admiralty-design-system.git",
|
|
70
|
-
"gitHead": "
|
|
70
|
+
"gitHead": "e665af0c48287be278815616d61ca24f129ccdd9"
|
|
71
71
|
}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{r as t,c as i,h as s}from"./p-a2b7bb90.js";const n=".text-input-container.sc-admiralty-input{display:flex;flex-direction:column}.text-input-container.sc-admiralty-input input.sc-admiralty-input{background-color:#ffffff;border-color:#333333;border-width:2px;border-style:solid;color:#333333;font-size:18px;line-height:24px;font-weight:300;padding:12px}.text-input-container.sc-admiralty-input input.sc-admiralty-input:focus{outline-offset:unset;outline:3px solid #ffdd00;box-shadow:#333333 inset 0 0 0 2px}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input{border-color:#e20d0d}.text-input-container.sc-admiralty-input input.invalid.sc-admiralty-input:focus-visible{border-color:unset;outline:3px solid #ffdd00}.text-input-container.sc-admiralty-input input.disabled.sc-admiralty-input{color:#adadad;border-color:#adadad;background:#ffffff}.text-input-container.sc-admiralty-input admiralty-input-error.sc-admiralty-input{margin-top:6px}";const e=class{constructor(s){t(this,s);this.admiraltyChange=i(this,"admiraltyChange",7);this.inputId=`admiralty-input-${++a}`;this.onInput=t=>{const i=t.target;if(i){this.value=i.value||""}};this.name=this.inputId;this.label=undefined;this.hint=undefined;this.disabled=false;this.type="text";this.placeholder=undefined;this.width=undefined;this.maxLength=undefined;this.required=false;this.invalid=false;this.invalidMessage=undefined;this.autocomplete="off";this.value=""}valueChanged(){const t=this.nativeInput;const i=this.getValue();if(t&&t.value!==i){t.value=i}this.admiraltyChange.emit({value:this.value==null?this.getValue():this.value.toString()})}getValue(){return typeof this.value==="number"?this.value.toString():(this.value||"").toString()}render(){const t=this.getValue();return s("div",{class:"text-input-container"},this.label?s("admiralty-label",{disabled:this.disabled,for:this.inputId},this.label):null,this.hint?s("admiralty-hint",{disabled:this.disabled},this.hint):null,s("input",{ref:t=>this.nativeInput=t,class:{disabled:this.disabled,invalid:this.invalid},disabled:this.disabled,id:this.inputId,name:this.name,type:this.type,value:t,maxLength:this.maxLength,onInput:this.onInput,placeholder:this.placeholder,autoComplete:this.autocomplete,required:this.required,style:{maxWidth:this.width?`${this.width}px`:null}}),s("admiralty-input-error",{style:{visibility:this.invalid&&this.invalidMessage?"visible":"hidden"}},this.invalidMessage))}static get watchers(){return{value:["valueChanged"]}}};let a=0;e.style=n;export{e as admiralty_input};
|
|
2
|
-
//# sourceMappingURL=p-d7ee2a19.entry.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"names":["inputCss","InputComponent","this","inputId","nextId","onInput","ev","input","target","value","valueChanged","nativeInput","getValue","admiraltyChange","emit","toString","render","h","class","label","disabled","for","hint","ref","invalid","id","name","type","maxLength","placeholder","autoComplete","autocomplete","required","style","maxWidth","width","visibility","invalidMessage"],"sources":["./src/components/input/input.scss?tag=admiralty-input&encapsulation=scoped","./src/components/input/input.tsx"],"sourcesContent":["@use '../../scss/vars/colours';\n@use '../../scss/vars/typography';\n\n.text-input-container {\n display: flex;\n flex-direction: column;\n\n input {\n background-color: colours.$colour-white;\n border-color: colours.$colour-text;\n border-width: 2px;\n border-style: solid;\n color: colours.$colour-text;\n font-size: 18px;\n line-height: 24px;\n font-weight: typography.$font-weight-light;\n\n padding: 12px;\n\n &:focus {\n outline-offset: unset;\n outline: 3px solid colours.$colour-utility-focus;\n box-shadow: colours.$colour-text inset 0 0 0 2px;\n }\n\n &.invalid {\n border-color: colours.$colour-utility-error;\n\n &:focus-visible {\n border-color: unset;\n outline: 3px solid colours.$colour-utility-focus;\n }\n }\n\n &.disabled {\n color: colours.$colour-textinput-text-disabled;\n border-color: colours.$colour-textinput-border-disabled;\n background: colours.$colour-white;\n }\n }\n\n admiralty-input-error {\n margin-top: 6px;\n }\n}\n","import { Component, ComponentInterface, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\nimport { InputChangeEventDetail } from './input.interface';\n\n/**\n * Once this component works, review whether a form field component should be created so\n * that shared properties such as `label`, `hint`, `disabled` etc. can be defined once.\n * Examples of similar components that can extend that base component are area, select\n * and checkbox.\n */\n\n@Component({\n tag: 'admiralty-input',\n styleUrl: 'input.scss',\n scoped: true,\n})\nexport class InputComponent implements ComponentInterface {\n inputId: string = `admiralty-input-${++nextId}`;\n\n private nativeInput?: HTMLInputElement;\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name: string = this.inputId;\n\n /**\n * The label which will be used above the input to describe the input.\n */\n @Prop() label: string;\n\n /**\n * The hint which will be used under the label to describe the input.\n */\n @Prop() hint: string;\n\n /**\n * This dictates whether the form field is disabled.\n */\n @Prop() disabled = false;\n\n /**\n * The input type, options are: `text | date | time | email | password | tel | url`\n */\n @Prop() type: 'text' | 'date' | 'time' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n /**\n * The placeholder text to show in the input\n */\n @Prop() placeholder: string;\n\n /**\n * The maximum width for the input field.\n */\n @Prop() width: number;\n\n /**\n * The maximum string length for the input field.\n */\n @Prop() maxLength?: number;\n\n /**\n * This dictates whether the input is required or not\n */\n @Prop() required: boolean = false;\n\n /**\n * Whether to show the input in an invalid state\n */\n @Prop() invalid: boolean = false;\n\n /**\n * The message to show when the input is invalid\n */\n @Prop() invalidMessage: string;\n\n /**\n * Indicates whether the value of the control can be automatically completed by the browser.\n */\n @Prop() autocomplete: string = 'off';\n\n /**\n * The value of the input.\n */\n @Prop({ mutable: true }) value?: string | number | null = '';\n\n /**\n * Emitted when the value has changed.\n */\n @Event() admiraltyChange: EventEmitter<InputChangeEventDetail>;\n\n /**\n * Update the native input element when the value changes\n */\n @Watch('value')\n protected valueChanged() {\n const nativeInput = this.nativeInput;\n const value = this.getValue();\n if (nativeInput && nativeInput.value !== value) {\n nativeInput.value = value;\n }\n this.admiraltyChange.emit({ value: this.value == null ? this.getValue() : this.value.toString() });\n }\n\n private onInput = (ev: Event) => {\n const input = ev.target as HTMLInputElement | null;\n if (input) {\n this.value = input.value || '';\n }\n };\n\n private getValue(): string {\n return typeof this.value === 'number' ? this.value.toString() : (this.value || '').toString();\n }\n\n render() {\n const value = this.getValue();\n return (\n <div class=\"text-input-container\">\n {this.label ? (\n <admiralty-label disabled={this.disabled} for={this.inputId}>\n {this.label}\n </admiralty-label>\n ) : null}\n {this.hint ? <admiralty-hint disabled={this.disabled}>{this.hint}</admiralty-hint> : null}\n <input\n ref={input => (this.nativeInput = input)}\n class={{ disabled: this.disabled, invalid: this.invalid }}\n disabled={this.disabled}\n id={this.inputId}\n name={this.name}\n type={this.type}\n value={value}\n maxLength={this.maxLength}\n onInput={this.onInput}\n placeholder={this.placeholder}\n autoComplete={this.autocomplete}\n required={this.required}\n style={{\n maxWidth: this.width ? `${this.width}px` : null,\n }}\n />\n <admiralty-input-error style={{ visibility: this.invalid && this.invalidMessage ? 'visible' : 'hidden' }}>{this.invalidMessage}</admiralty-input-error>\n </div>\n );\n }\n}\nlet nextId = 0;\n"],"mappings":"kDAAA,MAAMA,EAAW,84B,MCeJC,EAAc,M,0EACzBC,KAAAC,QAAkB,qBAAqBC,IAuF/BF,KAAAG,QAAWC,IACjB,MAAMC,EAAQD,EAAGE,OACjB,GAAID,EAAO,CACTL,KAAKO,MAAQF,EAAME,OAAS,E,aAnFTP,KAAKC,Q,uDAeT,M,UAK6D,O,uFAoBpD,M,aAKD,M,gDAUI,M,WAK2B,E,CAWhDO,eACR,MAAMC,EAAcT,KAAKS,YACzB,MAAMF,EAAQP,KAAKU,WACnB,GAAID,GAAeA,EAAYF,QAAUA,EAAO,CAC9CE,EAAYF,MAAQA,C,CAEtBP,KAAKW,gBAAgBC,KAAK,CAAEL,MAAOP,KAAKO,OAAS,KAAOP,KAAKU,WAAaV,KAAKO,MAAMM,Y,CAU/EH,WACN,cAAcV,KAAKO,QAAU,SAAWP,KAAKO,MAAMM,YAAcb,KAAKO,OAAS,IAAIM,U,CAGrFC,SACE,MAAMP,EAAQP,KAAKU,WACnB,OACEK,EAAA,OAAKC,MAAM,wBACRhB,KAAKiB,MACJF,EAAA,mBAAiBG,SAAUlB,KAAKkB,SAAUC,IAAKnB,KAAKC,SACjDD,KAAKiB,OAEN,KACHjB,KAAKoB,KAAOL,EAAA,kBAAgBG,SAAUlB,KAAKkB,UAAWlB,KAAKoB,MAAyB,KACrFL,EAAA,SACEM,IAAKhB,GAAUL,KAAKS,YAAcJ,EAClCW,MAAO,CAAEE,SAAUlB,KAAKkB,SAAUI,QAAStB,KAAKsB,SAChDJ,SAAUlB,KAAKkB,SACfK,GAAIvB,KAAKC,QACTuB,KAAMxB,KAAKwB,KACXC,KAAMzB,KAAKyB,KACXlB,MAAOA,EACPmB,UAAW1B,KAAK0B,UAChBvB,QAASH,KAAKG,QACdwB,YAAa3B,KAAK2B,YAClBC,aAAc5B,KAAK6B,aACnBC,SAAU9B,KAAK8B,SACfC,MAAO,CACLC,SAAUhC,KAAKiC,MAAQ,GAAGjC,KAAKiC,UAAY,QAG/ClB,EAAA,yBAAuBgB,MAAO,CAAEG,WAAYlC,KAAKsB,SAAWtB,KAAKmC,eAAiB,UAAY,WAAanC,KAAKmC,gB,wDAKxH,IAAIjC,EAAS,E"}
|