@operato/input 1.0.0-beta.3 → 1.0.0-beta.32

package/themes/common-grist-styles.ts

@@ -0,0 +1,110 @@
+import { css } from 'lit'
+
+export const CommonGristStyles = css`
+  :host {
+    display: flex;
+
+    width: 100%;
+  }
+
+  ox-grist {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  [slot='headroom'] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: var(--padding-default) var(--padding-wide);
+    border-top: 2px solid rgba(0, 0, 0, 0.2);
+    background-color: var(--theme-white-color);
+    box-shadow: var(--box-shadow);
+
+    --mdc-icon-size: 24px;
+  }
+  #sorters mwc-icon,
+  #modes mwc-icon {
+    --mdc-icon-size: 18px;
+  }
+  #sorters {
+    margin-left: auto;
+    margin-right: var(--margin-default);
+    padding-left: var(--padding-narrow);
+    border-bottom: var(--border-dark-color);
+    position: relative;
+    color: var(--secondary-color);
+    font-size: var(--fontsize-default);
+    user-select: none;
+  }
+
+  #sorters > * {
+    padding: var(--padding-narrow);
+    vertical-align: middle;
+  }
+
+  #modes > * {
+    padding: var(--padding-narrow);
+    opacity: 0.5;
+    color: var(--primary-text-color);
+    cursor: pointer;
+  }
+
+  #modes > mwc-icon[active] {
+    border-radius: 9px;
+    background-color: rgba(var(--primary-color-rgb), 0.05);
+    opacity: 1;
+    color: var(--secondary-text-color);
+    cursor: default;
+  }
+
+  #modes > mwc-icon:hover {
+    opacity: 1;
+    color: var(--secondary-text-color);
+  }
+
+  #add {
+    width: 50px;
+    text-align: right;
+  }
+
+  #add button {
+    background-color: var(--status-success-color);
+    border: 0;
+    border-radius: 50%;
+    padding: 5px;
+    width: 36px;
+    height: 36px;
+    cursor: pointer;
+  }
+
+  #add button:hover {
+    background-color: var(--focus-background-color);
+    box-shadow: var(--box-shadow);
+  }
+
+  #add button mwc-icon {
+    font-size: 2em;
+    color: var(--theme-white-color);
+  }
+
+  #filters {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  #filters * {
+    margin-right: var(--margin-default);
+  }
+
+  @media only screen and (max-width: 460px) {
+    #filters {
+      flex-direction: column;
+    }
+
+    #modes {
+      display: none;
+    }
+  }
+`

package/themes/input-theme.css

@@ -0,0 +1,19 @@
+body {
+  --ox-input-border: 1px solid rgba(0, 0, 0, 0.1);
+  --ox-input-border-radius: var(--border-radius);
+  --ox-input-padding: var(--input-padding);
+  --ox-input-font: normal 15px var(--theme-font);
+  --ox-input-color: var(--secondary-color);
+}
+
+@media screen and (max-width: 480px) {
+  body {
+  }
+}
+
+@media (min-width: 481px) and (max-width: 1024px) {
+  body {
+    --ox-input-font: normal 16px var(--theme-font);
+    --ox-input-padding: 4px 5px;
+  }
+}

package/xliff/en.xlf

@@ -23,6 +23,30 @@
 <trans-unit id="s075cb2f53173bd8a">
   <source>rotate</source>
 </trans-unit>
+<trans-unit id="sc4bcadba8e631b86">
+  <source>name</source>
+</trans-unit>
+<trans-unit id="s63c6e58ec805a9eb">
+  <source>from date</source>
+</trans-unit>
+<trans-unit id="sfcc01216c601ec9e">
+  <source>from time</source>
+</trans-unit>
+<trans-unit id="s685db98545dc9448">
+  <source>to date</source>
+</trans-unit>
+<trans-unit id="s77c8560cf63a372d">
+  <source>to time</source>
+</trans-unit>
+<trans-unit id="s42670fc325584e15">
+  <source>The day before</source>
+</trans-unit>
+<trans-unit id="s29ec9210c8a8222e">
+  <source>The day</source>
+</trans-unit>
+<trans-unit id="scff69aa7239287b0">
+  <source>The day after</source>
+</trans-unit>
 </body>
 </file>
 </xliff>

package/xliff/ko.xlf

@@ -30,6 +30,38 @@
   <source>rotate</source>
   <target>회전</target>
 </trans-unit>
+<trans-unit id="sc4bcadba8e631b86">
+  <source>name</source>
+  <target>이름</target>
+</trans-unit>
+<trans-unit id="s63c6e58ec805a9eb">
+  <source>from date</source>
+  <target>시작일</target>
+</trans-unit>
+<trans-unit id="sfcc01216c601ec9e">
+  <source>from time</source>
+  <target>시작시간</target>
+</trans-unit>
+<trans-unit id="s685db98545dc9448">
+  <source>to date</source>
+  <target>완료일</target>
+</trans-unit>
+<trans-unit id="s77c8560cf63a372d">
+  <source>to time</source>
+  <target>완료시간</target>
+</trans-unit>
+<trans-unit id="s42670fc325584e15">
+  <source>The day before</source>
+  <target>전날</target>
+</trans-unit>
+<trans-unit id="s29ec9210c8a8222e">
+  <source>The day</source>
+  <target>당일</target>
+</trans-unit>
+<trans-unit id="scff69aa7239287b0">
+  <source>The day after</source>
+  <target>다음날</target>
+</trans-unit>
 </body>
 </file>
 </xliff>

package/xliff/ms.xlf

@@ -23,6 +23,30 @@
 <trans-unit id="s075cb2f53173bd8a">
   <source>rotate</source>
 </trans-unit>
+<trans-unit id="sc4bcadba8e631b86">
+  <source>name</source>
+</trans-unit>
+<trans-unit id="s63c6e58ec805a9eb">
+  <source>from date</source>
+</trans-unit>
+<trans-unit id="sfcc01216c601ec9e">
+  <source>from time</source>
+</trans-unit>
+<trans-unit id="s685db98545dc9448">
+  <source>to date</source>
+</trans-unit>
+<trans-unit id="s77c8560cf63a372d">
+  <source>to time</source>
+</trans-unit>
+<trans-unit id="s42670fc325584e15">
+  <source>The day before</source>
+</trans-unit>
+<trans-unit id="s29ec9210c8a8222e">
+  <source>The day</source>
+</trans-unit>
+<trans-unit id="scff69aa7239287b0">
+  <source>The day after</source>
+</trans-unit>
 </body>
 </file>
 </xliff>

package/xliff/zh.xlf

@@ -23,6 +23,30 @@
 <trans-unit id="s075cb2f53173bd8a">
   <source>rotate</source>
 </trans-unit>
+<trans-unit id="sc4bcadba8e631b86">
+  <source>name</source>
+</trans-unit>
+<trans-unit id="s63c6e58ec805a9eb">
+  <source>from date</source>
+</trans-unit>
+<trans-unit id="sfcc01216c601ec9e">
+  <source>from time</source>
+</trans-unit>
+<trans-unit id="s685db98545dc9448">
+  <source>to date</source>
+</trans-unit>
+<trans-unit id="s77c8560cf63a372d">
+  <source>to time</source>
+</trans-unit>
+<trans-unit id="s42670fc325584e15">
+  <source>The day before</source>
+</trans-unit>
+<trans-unit id="s29ec9210c8a8222e">
+  <source>The day</source>
+</trans-unit>
+<trans-unit id="scff69aa7239287b0">
+  <source>The day after</source>
+</trans-unit>
 </body>
 </file>
 </xliff>

package/dist/stories/index.stories.js

@@ -1,33 +0,0 @@
-import '../src/input.js';
-import { html } from 'lit';
-export default {
-    title: 'PropertyEditor',
-    component: 'property-editor',
-    argTypes: {
-        title: { control: 'text' },
-        counter: { control: 'number' },
-        textColor: { control: 'color' }
-    }
-};
-const Template = ({ title = 'Hello world', counter = 5, textColor, slot }) => html `
-  <property-editor style="--property-editor-text-color: ${textColor || 'black'}" .title=${title} .counter=${counter}>
-    ${slot}
-  </property-editor>
-`;
-export const Regular = Template.bind({});
-export const CustomTitle = Template.bind({});
-CustomTitle.args = {
-    title: 'My title'
-};
-export const CustomCounter = Template.bind({});
-CustomCounter.args = {
-    counter: 123456
-};
-export const SlottedContent = Template.bind({});
-SlottedContent.args = {
-    slot: html `<p>Slotted content</p>`
-};
-SlottedContent.argTypes = {
-    slot: { table: { disable: true } }
-};
-//# sourceMappingURL=index.stories.js.map

package/dist/stories/index.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../stories/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAA;AAExB,OAAO,EAAkB,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,iBAAiB;IAC5B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,OAAO,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;QAC9B,SAAS,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;KAChC;CACF,CAAA;AAeD,MAAM,QAAQ,GAAoB,CAAC,EAAE,KAAK,GAAG,aAAa,EAAE,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;0DACnD,SAAS,IAAI,OAAO,YAAY,KAAK,aAAa,OAAO;MAC7G,IAAI;;CAET,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC5C,WAAW,CAAC,IAAI,GAAG;IACjB,KAAK,EAAE,UAAU;CAClB,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC9C,aAAa,CAAC,IAAI,GAAG;IACnB,OAAO,EAAE,MAAM;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC/C,cAAc,CAAC,IAAI,GAAG;IACpB,IAAI,EAAE,IAAI,CAAA,wBAAwB;CACnC,CAAA;AACD,cAAc,CAAC,QAAQ,GAAG;IACxB,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACnC,CAAA","sourcesContent":["import '../src/input.js'\n\nimport { TemplateResult, html } from 'lit'\n\nexport default {\n  title: 'PropertyEditor',\n  component: 'property-editor',\n  argTypes: {\n    title: { control: 'text' },\n    counter: { control: 'number' },\n    textColor: { control: 'color' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  title?: string\n  counter?: number\n  textColor?: string\n  slot?: TemplateResult\n}\n\nconst Template: Story<ArgTypes> = ({ title = 'Hello world', counter = 5, textColor, slot }: ArgTypes) => html`\n  <property-editor style=\"--property-editor-text-color: ${textColor || 'black'}\" .title=${title} .counter=${counter}>\n    ${slot}\n  </property-editor>\n`\n\nexport const Regular = Template.bind({})\n\nexport const CustomTitle = Template.bind({})\nCustomTitle.args = {\n  title: 'My title'\n}\n\nexport const CustomCounter = Template.bind({})\nCustomCounter.args = {\n  counter: 123456\n}\n\nexport const SlottedContent = Template.bind({})\nSlottedContent.args = {\n  slot: html`<p>Slotted content</p>`\n}\nSlottedContent.argTypes = {\n  slot: { table: { disable: true } }\n}\n"]}

package/stories/index.stories.ts

@@ -1,52 +0,0 @@
-import '../src/input.js'
-
-import { TemplateResult, html } from 'lit'
-
-export default {
-  title: 'PropertyEditor',
-  component: 'property-editor',
-  argTypes: {
-    title: { control: 'text' },
-    counter: { control: 'number' },
-    textColor: { control: 'color' }
-  }
-}
-
-interface Story<T> {
-  (args: T): TemplateResult
-  args?: Partial<T>
-  argTypes?: Record<string, unknown>
-}
-
-interface ArgTypes {
-  title?: string
-  counter?: number
-  textColor?: string
-  slot?: TemplateResult
-}
-
-const Template: Story<ArgTypes> = ({ title = 'Hello world', counter = 5, textColor, slot }: ArgTypes) => html`
-  <property-editor style="--property-editor-text-color: ${textColor || 'black'}" .title=${title} .counter=${counter}>
-    ${slot}
-  </property-editor>
-`
-
-export const Regular = Template.bind({})
-
-export const CustomTitle = Template.bind({})
-CustomTitle.args = {
-  title: 'My title'
-}
-
-export const CustomCounter = Template.bind({})
-CustomCounter.args = {
-  counter: 123456
-}
-
-export const SlottedContent = Template.bind({})
-SlottedContent.args = {
-  slot: html`<p>Slotted content</p>`
-}
-SlottedContent.argTypes = {
-  slot: { table: { disable: true } }
-}