@lanaco/lnc-react-ui 4.0.152 → 4.0.153

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 (3) hide show
  1. package/dist/FieldOfInterestsWithTagsCardsSection.cjs +10 -9
  2. package/dist/FieldOfInterestsWithTagsCardsSection.js +63 -59
  3. package/package.json +1 -1
package/dist/FieldOfInterestsWithTagsCardsSection.cjs CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";const r=require("react/jsx-runtime"),p=require("react"),c=require("./emotion-styled.browser.esm-BtEseadx.cjs"),l=require("./utils-Dl9xPH4c.cjs"),g=require("./consts-goSZX3xP.cjs"),y=require("./Icon.cjs"),b=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),j=c.styled.div`
1
+ "use strict";const r=require("react/jsx-runtime"),c=require("react"),m=require("./emotion-styled.browser.esm-BtEseadx.cjs"),l=require("./utils-Dl9xPH4c.cjs"),g=require("./consts-goSZX3xP.cjs"),b=require("./Icon.cjs"),j=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),k=m.styled.div`
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  align-items: flex-start;
@@ -15,7 +15,8 @@
15
15
  width: 100%;
16
16
  aspect-ratio: 1 / 1;
17
17
  object-fit: cover;
18
- height: auto;
18
+ height: 100%;
19
+ max-height: 10.375rem;
19
20
  border-radius: 0.75rem 0.75rem 0 0;
20
21
  }
21
22
 
@@ -49,12 +50,12 @@
49
50
  }
50
51
  }
51
52
  cursor: pointer;
52
- `,k=c.styled.div`
53
+ `,$=m.styled.div`
53
54
  width: 100%;
54
55
  height: 11.625rem;
55
56
  border-radius: 0.75rem;
56
57
  background: ${l.linearGradientAnimation("-90deg")};
57
- `,I=c.styled.div`
58
+ `,I=m.styled.div`
58
59
  display: flex;
59
60
  padding: 0 0.75rem 0 0.75rem;
60
61
  align-items: center;
@@ -94,7 +95,7 @@
94
95
  }
95
96
 
96
97
  &.active {
97
- background: var(--yellow-600, #d97706);
98
+ background: ${t=>(t==null?void 0:t.activeColor)||"var(--yellow-600, #d97706)"};
98
99
 
99
100
  & .wrapper__icon {
100
101
  color: var(--white, #fff);
@@ -108,12 +109,12 @@
108
109
  @media (max-width: ${g.MOBILE_SIZE_PX+"px"}) {
109
110
  min-width: fit-content;
110
111
  }
111
- `,N=c.styled.div`
112
+ `,N=m.styled.div`
112
113
  width: 7rem;
113
114
  height: 3rem;
114
115
  border-radius: 999px;
115
116
  background: ${l.linearGradientAnimation("-90deg")};
116
- `,$=p.forwardRef(({},i)=>r.jsx(N,{})),C=p.forwardRef(({name:i,isActive:n,icon:t,onSelectCard:o=()=>{}},d)=>r.jsxs(I,{ref:d,className:n?"active":"",onClick:o,children:[l.isDefinedNotEmptyString(t)&&r.jsx(y,{icon:t,className:"wrapper__icon"}),r.jsx("div",{className:"wrapper__text",children:i})]})),W=p.forwardRef(({image:i,imageComponent:n,name:t,description:o,onSelectCard:d=()=>{}},m)=>{const{theme:f}=b.useTheme();return r.jsxs(j,{ref:m,theme:f,onClick:d,children:[l.isDefined(n)?n:r.jsx("img",{src:i,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[t&&r.jsx("div",{className:"wrapper__title",children:t}),o&&r.jsx("div",{className:"wrapper__description",children:o})]})]})}),R=p.forwardRef(({},i)=>r.jsx(k,{})),F=c.styled.div`
117
+ `,C=c.forwardRef(({},t)=>r.jsx(N,{})),W=c.forwardRef(({name:t,isActive:n,activeColor:i,icon:a,onSelectCard:d=()=>{}},p)=>r.jsxs(I,{ref:p,className:n?"active":"",activeColor:i,onClick:d,children:[l.isDefinedNotEmptyString(a)&&r.jsx(b,{icon:a,className:"wrapper__icon"}),r.jsx("div",{className:"wrapper__text",children:t})]})),R=c.forwardRef(({image:t,imageComponent:n,name:i,description:a,onSelectCard:d=()=>{}},p)=>{const{theme:f}=j.useTheme();return r.jsxs(k,{ref:p,theme:f,onClick:d,children:[l.isDefined(n)?n:r.jsx("img",{src:t,className:"wrapper__image"}),r.jsxs("div",{className:"wrapper__content",children:[i&&r.jsx("div",{className:"wrapper__title",children:i}),a&&r.jsx("div",{className:"wrapper__description",children:a})]})]})}),F=c.forwardRef(({},t)=>r.jsx($,{})),T=m.styled.div`
117
118
  display: flex;
118
119
  flex-direction: column;
119
120
  align-items: center;
@@ -154,7 +155,7 @@
154
155
 
155
156
  & .wrapper__cards {
156
157
  display: grid;
157
- grid-template-columns: ${i=>`repeat(${i==null?void 0:i.limitCards}, minmax(0, 1fr))`};
158
+ grid-template-columns: ${t=>`repeat(${t==null?void 0:t.limitCards}, minmax(0, 1fr))`};
158
159
  justify-content: center;
159
160
  align-items: center;
160
161
  gap: 1.5rem;
@@ -188,4 +189,4 @@
188
189
  gap: 1rem;
189
190
  }
190
191
  }
191
- `,T=p.forwardRef(({title:i,subtitle:n,tags:t=[],limitTags:o=7,limitTagsForMobile:d=7,limit:m=3,limitForMobile:f=2,items:a=[],selectedTag:u,onSelectTag:h=()=>{},onSelectCard:_=()=>{}},v)=>{var w,x;return r.jsxs(F,{ref:v,limitTags:o,limitTagsForMobile:d,limitCards:m,limitCardsForMobile:f,children:[r.jsxs("div",{className:"wrapper__heading",children:[i&&r.jsx("div",{className:"wrapper__title",children:i}),n&&r.jsx("div",{className:"wrapper__subtitle",children:n})]}),r.jsx("div",{className:"wrapper__tags",children:t&&(t==null?void 0:t.length)>0?t==null?void 0:t.map((e,s)=>r.jsx(C,{icon:e==null?void 0:e.icon,name:e==null?void 0:e.title,isActive:(e==null?void 0:e.code)===u,onSelectCard:()=>h==null?void 0:h(e)},`field-of-interests-with-tags-card-tag__${s+1}`)):(w=Array.from("123"))==null?void 0:w.map((e,s)=>r.jsx($,{},`field-of-interests-with-tags-card-tag-skeleton__${s+1}`))}),r.jsx("div",{className:"wrapper__cards",children:a&&(a==null?void 0:a.length)>0?a==null?void 0:a.map((e,s)=>r.jsx(W,{image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,name:e==null?void 0:e.title,description:e==null?void 0:e.description,onSelectCard:()=>_==null?void 0:_(e)},`field-of-interests-with-tags-card__${s+1}`)):(x=Array.from("123"))==null?void 0:x.map((e,s)=>r.jsx(R,{},`field-of-interests-with-tags-card-skeleton__${s+1}`))})]})});module.exports=T;
192
+ `,q=c.forwardRef(({title:t,subtitle:n,tags:i=[],limitTags:a=7,limitTagsForMobile:d=7,limit:p=3,limitForMobile:f=2,items:s=[],selectedTag:u,activeColor:v,onSelectTag:h=()=>{},onSelectCard:_=()=>{}},y)=>{var w,x;return r.jsxs(T,{ref:y,limitTags:a,limitTagsForMobile:d,limitCards:p,limitCardsForMobile:f,children:[r.jsxs("div",{className:"wrapper__heading",children:[t&&r.jsx("div",{className:"wrapper__title",children:t}),n&&r.jsx("div",{className:"wrapper__subtitle",children:n})]}),r.jsx("div",{className:"wrapper__tags",children:i&&(i==null?void 0:i.length)>0?i==null?void 0:i.map((e,o)=>r.jsx(W,{icon:e==null?void 0:e.icon,name:e==null?void 0:e.title,isActive:(e==null?void 0:e.code)===u,activeColor:v,onSelectCard:()=>h==null?void 0:h(e)},`field-of-interests-with-tags-card-tag__${o+1}`)):(w=Array.from("123"))==null?void 0:w.map((e,o)=>r.jsx(C,{},`field-of-interests-with-tags-card-tag-skeleton__${o+1}`))}),r.jsx("div",{className:"wrapper__cards",children:s&&(s==null?void 0:s.length)>0?s==null?void 0:s.map((e,o)=>r.jsx(R,{image:e==null?void 0:e.image,imageComponent:e==null?void 0:e.imageComponent,name:e==null?void 0:e.title,description:e==null?void 0:e.description,onSelectCard:()=>_==null?void 0:_(e)},`field-of-interests-with-tags-card__${o+1}`)):(x=Array.from("123"))==null?void 0:x.map((e,o)=>r.jsx(F,{},`field-of-interests-with-tags-card-skeleton__${o+1}`))})]})});module.exports=q;
package/dist/FieldOfInterestsWithTagsCardsSection.js CHANGED
@@ -1,11 +1,11 @@
1
- import { jsx as r, jsxs as p } from "react/jsx-runtime";
2
- import { forwardRef as m } from "react";
3
- import { s as d } from "./emotion-styled.browser.esm-BNN1dTl3.js";
4
- import { p as x, o as u, k, l as N } from "./utils-BdsZgOUE.js";
1
+ import { jsx as i, jsxs as m } from "react/jsx-runtime";
2
+ import { forwardRef as d } from "react";
3
+ import { s as c } from "./emotion-styled.browser.esm-BNN1dTl3.js";
4
+ import { p as x, o as u, k as $, l as N } from "./utils-BdsZgOUE.js";
5
5
  import { M as v } from "./consts-BuFChS64.js";
6
- import $ from "./Icon.js";
7
- import { u as C } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
8
- const I = d.div`
6
+ import C from "./Icon.js";
7
+ import { u as I } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
8
+ const W = c.div`
9
9
  display: flex;
10
10
  flex-direction: column;
11
11
  align-items: flex-start;
@@ -22,7 +22,8 @@ const I = d.div`
22
22
  width: 100%;
23
23
  aspect-ratio: 1 / 1;
24
24
  object-fit: cover;
25
- height: auto;
25
+ height: 100%;
26
+ max-height: 10.375rem;
26
27
  border-radius: 0.75rem 0.75rem 0 0;
27
28
  }
28
29
 
@@ -56,12 +57,12 @@ const I = d.div`
56
57
  }
57
58
  }
58
59
  cursor: pointer;
59
- `, W = d.div`
60
+ `, j = c.div`
60
61
  width: 100%;
61
62
  height: 11.625rem;
62
63
  border-radius: 0.75rem;
63
64
  background: ${u("-90deg")};
64
- `, j = d.div`
65
+ `, F = c.div`
65
66
  display: flex;
66
67
  padding: 0 0.75rem 0 0.75rem;
67
68
  align-items: center;
@@ -101,7 +102,7 @@ const I = d.div`
101
102
  }
102
103
 
103
104
  &.active {
104
- background: var(--yellow-600, #d97706);
105
+ background: ${(r) => (r == null ? void 0 : r.activeColor) || "var(--yellow-600, #d97706)"};
105
106
 
106
107
  & .wrapper__icon {
107
108
  color: var(--white, #fff);
@@ -115,38 +116,39 @@ const I = d.div`
115
116
  @media (max-width: ${v + "px"}) {
116
117
  min-width: fit-content;
117
118
  }
118
- `, F = d.div`
119
+ `, T = c.div`
119
120
  width: 7rem;
120
121
  height: 3rem;
121
122
  border-radius: 999px;
122
123
  background: ${u("-90deg")};
123
- `, T = m(({}, t) => /* @__PURE__ */ r(F, {})), z = m(
124
- ({ name: t, isActive: a, icon: i, onSelectCard: l = () => {
125
- } }, s) => /* @__PURE__ */ p(
126
- j,
124
+ `, z = d(({}, r) => /* @__PURE__ */ i(T, {})), O = d(
125
+ ({ name: r, isActive: a, activeColor: t, icon: n, onSelectCard: s = () => {
126
+ } }, p) => /* @__PURE__ */ m(
127
+ F,
127
128
  {
128
- ref: s,
129
+ ref: p,
129
130
  className: a ? "active" : "",
130
- onClick: l,
131
+ activeColor: t,
132
+ onClick: s,
131
133
  children: [
132
- k(i) && /* @__PURE__ */ r($, { icon: i, className: "wrapper__icon" }),
133
- /* @__PURE__ */ r("div", { className: "wrapper__text", children: t })
134
+ $(n) && /* @__PURE__ */ i(C, { icon: n, className: "wrapper__icon" }),
135
+ /* @__PURE__ */ i("div", { className: "wrapper__text", children: r })
134
136
  ]
135
137
  }
136
138
  )
137
- ), O = m(
138
- ({ image: t, imageComponent: a, name: i, description: l, onSelectCard: s = () => {
139
- } }, c) => {
140
- const { theme: f } = C();
141
- return /* @__PURE__ */ p(I, { ref: c, theme: f, onClick: s, children: [
142
- N(a) ? a : /* @__PURE__ */ r("img", { src: t, className: "wrapper__image" }),
143
- /* @__PURE__ */ p("div", { className: "wrapper__content", children: [
144
- i && /* @__PURE__ */ r("div", { className: "wrapper__title", children: i }),
145
- l && /* @__PURE__ */ r("div", { className: "wrapper__description", children: l })
139
+ ), A = d(
140
+ ({ image: r, imageComponent: a, name: t, description: n, onSelectCard: s = () => {
141
+ } }, p) => {
142
+ const { theme: f } = I();
143
+ return /* @__PURE__ */ m(W, { ref: p, theme: f, onClick: s, children: [
144
+ N(a) ? a : /* @__PURE__ */ i("img", { src: r, className: "wrapper__image" }),
145
+ /* @__PURE__ */ m("div", { className: "wrapper__content", children: [
146
+ t && /* @__PURE__ */ i("div", { className: "wrapper__title", children: t }),
147
+ n && /* @__PURE__ */ i("div", { className: "wrapper__description", children: n })
146
148
  ] })
147
149
  ] });
148
150
  }
149
- ), A = m(({}, t) => /* @__PURE__ */ r(W, {})), E = d.div`
151
+ ), E = d(({}, r) => /* @__PURE__ */ i(j, {})), M = c.div`
150
152
  display: flex;
151
153
  flex-direction: column;
152
154
  align-items: center;
@@ -187,7 +189,7 @@ const I = d.div`
187
189
 
188
190
  & .wrapper__cards {
189
191
  display: grid;
190
- grid-template-columns: ${(t) => `repeat(${t == null ? void 0 : t.limitCards}, minmax(0, 1fr))`};
192
+ grid-template-columns: ${(r) => `repeat(${r == null ? void 0 : r.limitCards}, minmax(0, 1fr))`};
191
193
  justify-content: center;
192
194
  align-items: center;
193
195
  gap: 1.5rem;
@@ -221,52 +223,54 @@ const I = d.div`
221
223
  gap: 1rem;
222
224
  }
223
225
  }
224
- `, P = m(
226
+ `, X = d(
225
227
  ({
226
- title: t,
228
+ title: r,
227
229
  subtitle: a,
228
- tags: i = [],
229
- limitTags: l = 7,
230
+ tags: t = [],
231
+ limitTags: n = 7,
230
232
  limitTagsForMobile: s = 7,
231
- limit: c = 3,
233
+ limit: p = 3,
232
234
  limitForMobile: f = 2,
233
- items: n = [],
235
+ items: o = [],
234
236
  selectedTag: y,
237
+ activeColor: b,
235
238
  onSelectTag: h = () => {
236
239
  },
237
240
  onSelectCard: _ = () => {
238
241
  }
239
- }, b) => {
242
+ }, k) => {
240
243
  var w, g;
241
- return /* @__PURE__ */ p(
242
- E,
244
+ return /* @__PURE__ */ m(
245
+ M,
243
246
  {
244
- ref: b,
245
- limitTags: l,
247
+ ref: k,
248
+ limitTags: n,
246
249
  limitTagsForMobile: s,
247
- limitCards: c,
250
+ limitCards: p,
248
251
  limitCardsForMobile: f,
249
252
  children: [
250
- /* @__PURE__ */ p("div", { className: "wrapper__heading", children: [
251
- t && /* @__PURE__ */ r("div", { className: "wrapper__title", children: t }),
252
- a && /* @__PURE__ */ r("div", { className: "wrapper__subtitle", children: a })
253
+ /* @__PURE__ */ m("div", { className: "wrapper__heading", children: [
254
+ r && /* @__PURE__ */ i("div", { className: "wrapper__title", children: r }),
255
+ a && /* @__PURE__ */ i("div", { className: "wrapper__subtitle", children: a })
253
256
  ] }),
254
- /* @__PURE__ */ r("div", { className: "wrapper__tags", children: i && (i == null ? void 0 : i.length) > 0 ? i == null ? void 0 : i.map((e, o) => /* @__PURE__ */ r(
255
- z,
257
+ /* @__PURE__ */ i("div", { className: "wrapper__tags", children: t && (t == null ? void 0 : t.length) > 0 ? t == null ? void 0 : t.map((e, l) => /* @__PURE__ */ i(
258
+ O,
256
259
  {
257
260
  icon: e == null ? void 0 : e.icon,
258
261
  name: e == null ? void 0 : e.title,
259
262
  isActive: (e == null ? void 0 : e.code) === y,
263
+ activeColor: b,
260
264
  onSelectCard: () => h == null ? void 0 : h(e)
261
265
  },
262
- `field-of-interests-with-tags-card-tag__${o + 1}`
263
- )) : (w = Array.from("123")) == null ? void 0 : w.map((e, o) => /* @__PURE__ */ r(
264
- T,
266
+ `field-of-interests-with-tags-card-tag__${l + 1}`
267
+ )) : (w = Array.from("123")) == null ? void 0 : w.map((e, l) => /* @__PURE__ */ i(
268
+ z,
265
269
  {},
266
- `field-of-interests-with-tags-card-tag-skeleton__${o + 1}`
270
+ `field-of-interests-with-tags-card-tag-skeleton__${l + 1}`
267
271
  )) }),
268
- /* @__PURE__ */ r("div", { className: "wrapper__cards", children: n && (n == null ? void 0 : n.length) > 0 ? n == null ? void 0 : n.map((e, o) => /* @__PURE__ */ r(
269
- O,
272
+ /* @__PURE__ */ i("div", { className: "wrapper__cards", children: o && (o == null ? void 0 : o.length) > 0 ? o == null ? void 0 : o.map((e, l) => /* @__PURE__ */ i(
273
+ A,
270
274
  {
271
275
  image: e == null ? void 0 : e.image,
272
276
  imageComponent: e == null ? void 0 : e.imageComponent,
@@ -274,11 +278,11 @@ const I = d.div`
274
278
  description: e == null ? void 0 : e.description,
275
279
  onSelectCard: () => _ == null ? void 0 : _(e)
276
280
  },
277
- `field-of-interests-with-tags-card__${o + 1}`
278
- )) : (g = Array.from("123")) == null ? void 0 : g.map((e, o) => /* @__PURE__ */ r(
279
- A,
281
+ `field-of-interests-with-tags-card__${l + 1}`
282
+ )) : (g = Array.from("123")) == null ? void 0 : g.map((e, l) => /* @__PURE__ */ i(
283
+ E,
280
284
  {},
281
- `field-of-interests-with-tags-card-skeleton__${o + 1}`
285
+ `field-of-interests-with-tags-card-skeleton__${l + 1}`
282
286
  )) })
283
287
  ]
284
288
  }
@@ -286,5 +290,5 @@ const I = d.div`
286
290
  }
287
291
  );
288
292
  export {
289
- P as default
293
+ X as default
290
294
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lanaco/lnc-react-ui",
3
- "version": "4.0.152",
3
+ "version": "4.0.153",
4
4
  "description": "React component library",
5
5
  "type": "module",
6
6
  "keywords": [