@operato/input 2.0.0-alpha.82 → 2.0.0-alpha.87

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.
Files changed (30) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/src/ox-checkbox.d.ts +1 -0
  3. package/dist/src/ox-checkbox.js +12 -6
  4. package/dist/src/ox-checkbox.js.map +1 -1
  5. package/dist/src/ox-input-i18n-label.js +2 -1
  6. package/dist/src/ox-input-i18n-label.js.map +1 -1
  7. package/dist/src/ox-input-search.js +1 -0
  8. package/dist/src/ox-input-search.js.map +1 -1
  9. package/dist/src/ox-input-value-map.js +2 -2
  10. package/dist/src/ox-input-value-map.js.map +1 -1
  11. package/dist/src/ox-input-value-ranges.js +7 -2
  12. package/dist/src/ox-input-value-ranges.js.map +1 -1
  13. package/dist/src/ox-input-work-shift.js +0 -3
  14. package/dist/src/ox-input-work-shift.js.map +1 -1
  15. package/dist/src/ox-select.js +12 -6
  16. package/dist/src/ox-select.js.map +1 -1
  17. package/dist/stories/ox-input-multiple-colors.stories.js +1 -1
  18. package/dist/stories/ox-input-multiple-colors.stories.js.map +1 -1
  19. package/dist/tsconfig.tsbuildinfo +1 -1
  20. package/package.json +4 -4
  21. package/src/ox-checkbox.ts +9 -6
  22. package/src/ox-input-i18n-label.ts +2 -1
  23. package/src/ox-input-search.ts +1 -0
  24. package/src/ox-input-value-map.ts +2 -2
  25. package/src/ox-input-value-ranges.ts +7 -2
  26. package/src/ox-input-work-shift.ts +0 -3
  27. package/src/ox-select.ts +12 -6
  28. package/stories/ox-input-multiple-colors.stories.ts +1 -1
  29. package/themes/app-theme.css +1 -1
  30. package/themes/input-theme.css +20 -7
package/dist/stories/ox-input-multiple-colors.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ox-input-multiple-colors.stories.js","sourceRoot":"","sources":["../../stories/ox-input-multiple-colors.stories.ts"],"names":[],"mappings":"AAAA,OAAO,oCAAoC,CAAA;AAE3C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,0BAA0B;IACrC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;QAC3B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAkKrD,CAAC,KAAK,EAAE,QAAQ,CAAC;cAChB,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;gBACW,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA","sourcesContent":["import '../src/ox-input-multiple-colors.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-input-multiple-colors',\n component: 'ox-input-multiple-colors',\n argTypes: {\n value: { control: 'array' },\n disabled: { control: 'boolean' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n disabled: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ disabled }: ArgTypes) => html`\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n body {\n /* theme color */\n --primary-color-rgb: 56, 162, 91;\n --primary-color: rgb(var(--primary-color-rgb));\n --secondary-color-rgb: 71, 97, 114;\n --secondary-color: rgb(var(--secondary-color-rgb));\n --focus-color: var(--theme-white-color);\n --primary-background-color: var(--secondary-color);\n --secondary-background-color: #183936;\n --main-section-background-color: #f7f6f4;\n --theme-white-color: #fff;\n --theme-black-color: rgba(0, 0, 0, 0.9);\n\n --focus-background-color: var(--primary-color);\n --primary-text-color: var(--theme-black-color);\n --secondary-text-color: #218f62;\n\n --opacity-dark-color: rgba(0, 0, 0, 0.4);\n --opacity-light-color: rgba(255, 255, 255, 0.8);\n\n /* status color */\n --status-success-color: #35a24a;\n --status-warning-color: #ee8d03;\n --status-danger-color: #d14946;\n --status-info-color: #398ace;\n\n /* common style */\n --border-radius: 4px;\n --border-dark-color: 1px solid rgba(0, 0, 0, 0.15);\n --border-light-color: 1px solid rgba(255, 255, 255, 0.3);\n\n --box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.1);\n\n --theme-font: 'Noto', Helvetica;\n\n --margin-default: 9px;\n --margin-narrow: 4px;\n --margin-wide: 15px;\n --padding-default: var(--margin-default);\n --padding-narrow: var(--margin-narrow);\n --padding-wide: var(--margin-wide);\n\n --scrollbar-thumb-color: rgba(57, 78, 100, 0.5);\n --scrollbar-thumb-hover-color: var(--primary-color);\n\n --fontsize-default: 14px;\n --fontsize-small: 13px;\n --fontsize-large: 16px;\n\n /* app layout style */\n --app-grid-template-area: 'header header header' 'nav main aside' 'nav footer aside';\n\n /* title & description style */\n --title-margin: var(--margin-narrow) 0;\n --title-font: bold 24px var(--theme-font);\n --title-text-color: var(--secondary-color);\n --title-font-mobile: bold 20px var(--theme-font);\n\n --page-description-margin: var(--margin-narrow) 0 var(--margin-wide) 0;\n --page-description-font: normal var(--fontsize-default) / 1.2rem var(--theme-font);\n --page-description-color: var(--secondary-text-color);\n\n --subtitle-padding: 12px 5px 3px 5px;\n --subtitle-font: bold 18px var(--theme-font);\n --subtitle-text-color: var(--primary-color);\n --subtitle-border-bottom: 1px solid var(--primary-color);\n\n /* icon style */\n --icon-tiny-size: 24px;\n --icon-default-size: 36px;\n --icon-big-size: 48px;\n --icon-default-color: var(--theme-white-color);\n\n /* material design component themes */\n --md-theme-on-primary: var(--theme-white-color);\n --md-theme-primary: var(--secondary-text-color);\n --md-theme-on-secondary: var(--theme-white-color);\n --md-theme-secondary: var(--primary-color);\n --md-button-outline-color: var(--primary-color);\n --md-danger-button-primary-color: var(--status-danger-color);\n --md-danger-button-outline-color: var(--status-danger-color);\n --md-button-outline-width: 1px;\n\n /* button style */\n --button-background-color: #fafbfc;\n --button-background-focus-color: var(--primary-color);\n --button-border: var(--border-dark-color);\n --button-border-radius: var(--border-radius);\n --button-margin: var(--margin-default) var(--margin-default) var(--margin-default) 0;\n --button-padding: var(--padding-default);\n --button-color: var(--secondary-color);\n --button-font: normal 15px var(--theme-font);\n --button-text-transform: capitalize;\n --button-active-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n --button-activ-border: 1px solid var(--primary-color);\n\n --button-primary-background-color: var(--primary-color);\n --button-primary-active-background-color: var(--status-success-color);\n --button-primary-padding: var(--margin-default) var(--margin-wide);\n --button-primary-color: var(--theme-white-color);\n --button-primary-font: bold 16px var(--theme-font);\n\n /* table style */\n --th-padding: var(--padding-default);\n --th-border-top: 2px solid var(--secondary-color);\n --th-text-transform: capitalize;\n --th-font: bold var(--fontsize-small) var(--theme-font);\n --th-color: rgba(var(--secondary-color-rgb), 0.8);\n\n --tr-background-color: var(--theme-white-color);\n --tr-background-odd-color: rgba(255, 255, 255, 0.4);\n --tr-background-hover-color: #e1f5fe;\n --td-border-line: 1px solid rgba(0, 0, 0, 0.05);\n --td-border-bottom: 1px solid rgba(0, 0, 0, 0.09);\n --td-padding: var(--padding-default);\n --td-font: normal 13px var(--theme-font);\n --td-color: var(--secondary-color);\n\n --label-cell-background-color: #f6f6f6; /* th or td common background color */\n\n /* form style */\n --label-font: normal var(--fontsize-default) var(--theme-font);\n --label-color: var(--secondary-color);\n --label-text-transform: capitalize;\n --input-margin: var(--margin-narrow) 0;\n --input-padding: var(--padding-default);\n --input-min-width: 200px;\n --input-font: normal var(--fontsize-default) var(--theme-font);\n --input-hint-font: normal var(--fontsize-small) var(--theme-font);\n --input-hint-color: #666;\n --input-container-max-width: 900px;\n --fieldset-margin: var(--padding-wide) 0;\n --fieldset-padding: 0 var(--padding-wide) var(--padding-wide) var(--padding-wide);\n --legend-padding: var(--padding-default) 0;\n --legend-color: var(--secondary-text-color);\n --legend-font: bold 16px var(--theme-font);\n }\n\n @media only screen and (max-width: 460px) {\n body {\n /* subtitle style */\n --subtitle-margin: 0;\n }\n }\n </style>\n\n <ox-input-multiple-colors\n .value=${['red', 'yellow']}\n @change=${(e: Event) => {\n console.log((e.target as HTMLInputElement).value)\n }}\n ?disabled=${disabled}\n >\n </ox-input-multiple-colors>\n`\n\nexport const Regular = Template.bind({})\n"]}
1
+ {"version":3,"file":"ox-input-multiple-colors.stories.js","sourceRoot":"","sources":["../../stories/ox-input-multiple-colors.stories.ts"],"names":[],"mappings":"AAAA,OAAO,oCAAoC,CAAA;AAE3C,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,0BAA0B;IACrC,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;QAC3B,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;KACjC;CACF,CAAA;AAYD,MAAM,QAAQ,GAAoB,CAAC,EAAE,QAAQ,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAkKrD,CAAC,KAAK,EAAE,QAAQ,CAAC;cAChB,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;gBACW,QAAQ;;;CAGvB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA","sourcesContent":["import '../src/ox-input-multiple-colors.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n title: 'ox-input-multiple-colors',\n component: 'ox-input-multiple-colors',\n argTypes: {\n value: { control: 'array' },\n disabled: { control: 'boolean' }\n }\n}\n\ninterface Story<T> {\n (args: T): TemplateResult\n args?: Partial<T>\n argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n disabled: boolean\n}\n\nconst Template: Story<ArgTypes> = ({ disabled }: ArgTypes) => html`\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n <link\n href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n rel=\"stylesheet\"\n />\n\n <style>\n body {\n /* theme color */\n --primary-color-rgb: 56, 162, 91;\n --primary-color: rgb(var(--primary-color-rgb));\n --secondary-color-rgb: 71, 97, 114;\n --secondary-color: rgb(var(--secondary-color-rgb));\n --focus-color: var(--theme-white-color);\n --primary-background-color: var(--secondary-color);\n --secondary-background-color: #183936;\n --main-section-background-color: #f7f6f4;\n --theme-white-color: #fff;\n --theme-black-color: rgba(0, 0, 0, 0.9);\n\n --focus-background-color: var(--primary-color);\n --primary-text-color: var(--theme-black-color);\n --secondary-text-color: #218f62;\n\n --opacity-dark-color: rgba(0, 0, 0, 0.4);\n --opacity-light-color: rgba(255, 255, 255, 0.8);\n\n /* status color */\n --status-success-color: #35a24a;\n --status-warning-color: #ee8d03;\n --status-danger-color: #d14946;\n --status-info-color: #398ace;\n\n /* common style */\n --border-radius: 4px;\n --border-dark-color: 1px solid rgba(0, 0, 0, 0.15);\n --border-light-color: 1px solid rgba(255, 255, 255, 0.3);\n\n --box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.1);\n\n --theme-font: 'Noto', Helvetica;\n\n --margin-default: 9px;\n --margin-narrow: 4px;\n --margin-wide: 15px;\n --padding-default: var(--margin-default);\n --padding-narrow: var(--margin-narrow);\n --padding-wide: var(--margin-wide);\n\n --scrollbar-thumb-color: rgba(57, 78, 100, 0.5);\n --scrollbar-thumb-hover-color: var(--primary-color);\n\n --fontsize-default: 14px;\n --fontsize-small: 13px;\n --fontsize-large: 16px;\n\n /* app layout style */\n --app-grid-template-area: 'header header header' 'nav main aside' 'nav footer aside';\n\n /* title & description style */\n --title-margin: var(--margin-narrow) 0;\n --title-font: bold 24px var(--theme-font);\n --title-text-color: var(--secondary-color);\n --title-font-mobile: bold 20px var(--theme-font);\n\n --page-description-margin: var(--margin-narrow) 0 var(--margin-wide) 0;\n --page-description-font: normal var(--fontsize-default) / 1.2rem var(--theme-font);\n --page-description-color: var(--secondary-text-color);\n\n --subtitle-padding: 12px 5px 3px 5px;\n --subtitle-font: bold 18px var(--theme-font);\n --subtitle-text-color: var(--primary-color);\n --subtitle-border-bottom: 1px solid var(--primary-color);\n\n /* icon style */\n --icon-tiny-size: 24px;\n --icon-default-size: 36px;\n --icon-big-size: 48px;\n --icon-default-color: var(--theme-white-color);\n\n /* material design component themes */\n --md-theme-on-primary: var(--theme-white-color);\n --md-theme-primary: var(--secondary-text-color);\n --md-theme-on-secondary: var(--theme-white-color);\n --md-theme-secondary: var(--primary-color);\n --md-button-outline-color: var(--primary-color);\n --md-danger-button-primary-color: var(--status-danger-color);\n --md-danger-button-outline-color: var(--status-danger-color);\n --md-button-outline-width: 1px;\n\n /* button style */\n --button-background-color: #fafbfc;\n --button-background-focus-color: var(--primary-color);\n --button-border: var(--border-dark-color);\n --button-border-radius: var(--border-radius);\n --button-margin: var(--margin-default) var(--margin-default) var(--margin-default) 0;\n --button-padding: var(--padding-default);\n --button-color: var(--secondary-color);\n --button-font: normal 15px var(--theme-font);\n --button-text-transform: capitalize;\n --button-active-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);\n --button-activ-border: 1px solid var(--primary-color);\n\n --button-primary-background-color: var(--primary-color);\n --button-primary-active-background-color: var(--status-success-color);\n --button-primary-padding: var(--margin-default) var(--margin-wide);\n --button-primary-color: var(--theme-white-color);\n --button-primary-font: bold 16px var(--theme-font);\n\n /* table style */\n --th-padding: var(--padding-default);\n --th-border-top: 2px solid var(--secondary-color);\n --th-text-transform: capitalize;\n --th-font: bold var(--fontsize-small) var(--theme-font);\n --th-color: rgba(var(--secondary-color-rgb), 0.8);\n\n --tr-background-color: var(--theme-white-color);\n --tr-background-odd-color: rgba(255, 255, 255, 0.4);\n --tr-background-hover-color: #e1f5fe;\n --td-border-line: 1px solid rgba(0, 0, 0, 0.05);\n --td-border-bottom: 1px solid rgba(0, 0, 0, 0.09);\n --td-padding: var(--padding-default);\n --td-font: normal 13px var(--theme-font);\n --td-color: var(--secondary-color);\n\n --label-cell-background-color: #f6f6f6; /* th or td common background color */\n\n /* form style */\n --label-font: normal var(--fontsize-default) var(--theme-font);\n --label-color: var(--secondary-color);\n --label-text-transform: capitalize;\n --input-margin: var(--margin-narrow) 0;\n --input-padding: 6px 2px;\n --input-min-width: 200px;\n --input-font: normal var(--fontsize-default) var(--theme-font);\n --input-hint-font: normal var(--fontsize-small) var(--theme-font);\n --input-hint-color: #666;\n --input-container-max-width: 900px;\n --fieldset-margin: var(--padding-wide) 0;\n --fieldset-padding: 0 var(--padding-wide) var(--padding-wide) var(--padding-wide);\n --legend-padding: var(--padding-default) 0;\n --legend-color: var(--secondary-text-color);\n --legend-font: bold 16px var(--theme-font);\n }\n\n @media only screen and (max-width: 460px) {\n body {\n /* subtitle style */\n --subtitle-margin: 0;\n }\n }\n </style>\n\n <ox-input-multiple-colors\n .value=${['red', 'yellow']}\n @change=${(e: Event) => {\n console.log((e.target as HTMLInputElement).value)\n }}\n ?disabled=${disabled}\n >\n </ox-input-multiple-colors>\n`\n\nexport const Regular = Template.bind({})\n"]}